Flutter（八）| 用Intl插件国际化

当App上架的时候，面对不同国家的语言，需要用到国际化，在Flutter中有三种方法可以进行国际化，这一节介绍第一种。

Flutter Intl插件

打开VSCode，在扩展中探索Intl并安装，插件链接：https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

安装好插件之后，按下Ctrl+Shift+P，在命令中输入intl，首先执行命令Flutter Intl: Initialize。

插件会在lib目录下，自动生成国际化所需要有文件。

├─generated
│ └─intl
│      └─messages_all.dart
│      └─messages_en.dart
│ └─l10n.dart
├─l10n
│ └─intl_en.arb
└─random

l10n目录下的arb就是配置文件。

generated目录下的就是对应配置文件的dart文件。

pubspec.yaml

自动生成文件之后，需要引入国际化包。

修改pubspec.yaml文件，在dependencies下新增包：

flutter_localizations:
  sdk: flutter

保存文件，等待Flutter自动下载包。

intl_en.arb

修改配置文件，配置需要进行翻译的文字内容：

{
	"generate": "Generate",
	"lowercaseLetter": "Lowercase Letter",
	"uppercaseLetter": "Uppercase Letter",
	"arabicNumeral": "Arabic Numeral",
	"specialCharacter": "Special Character",
	"length": "Length",
	"randomPassword": "Random Password",
	"passwordClipboard": "The password has been copied to the clipboard"
}

当保存修改之后，可以看到插件会自动生成messages_en.dart文件：

class MessageLookup extends MessageLookupByLibrary {
  String get localeName => 'en';

  final messages = _notInlinedMessages(_notInlinedMessages);
  static _notInlinedMessages(_) => <String, Function> {
    "arabicNumeral" : MessageLookupByLibrary.simpleMessage("Arabic Numeral"),
    "generate" : MessageLookupByLibrary.simpleMessage("Generate"),
    "length" : MessageLookupByLibrary.simpleMessage("Length"),
    "lowercaseLetter" : MessageLookupByLibrary.simpleMessage("Lowercase Letter"),
    "passwordClipboard" : MessageLookupByLibrary.simpleMessage("The password has been copied to the clipboard"),
    "randomPassword" : MessageLookupByLibrary.simpleMessage("Random Password"),
    "specialCharacter" : MessageLookupByLibrary.simpleMessage("Special Character"),
    "uppercaseLetter" : MessageLookupByLibrary.simpleMessage("Uppercase Letter")
  };
}

注意：generated目录下的文件不需要去修改，只需要修改l10n目录下的arb文件即可。

Add locale

那如何新增一个语言呢？

按下Ctrl+Shift+P，在命令中输入intl，执行命令Flutter Intl: Add locale，在弹出的输入框中输入zh，表示要加入中文的支持。

插件会自动生成messages_zh.dart和intl_zh.arb文件，修改intl_zh.arb文件：

{
	"generate": "生成",
	"lowercaseLetter": "小写字母",
	"uppercaseLetter": "大写字母",
	"arabicNumeral": "阿拉伯数字",
	"specialCharacter": "特殊字符",
	"length": "长度",
	"randomPassword": "随机密码",
	"passwordClipboard": "密码已经复制到剪贴板"
}

应用国际化

到这一步，国际化所需要的文件都已经准备好了，接下来修改代码使用。

首先修改main.dart文件：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:random_app/generated/l10n.dart';
import 'package:random_app/random/random_password.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: RandomPasswordPage(),
    );
  }
}

然后修改random_password.dart中需要国际化的地方，例如：

title: Text('Random Password'),
修改为
title: Text(S.of(context).randomPassword),

'Generate',
修改为
S.current.generate,

不要忘记引入包
import 'package:random_app/generated/l10n.dart';

S类有2个方法可以调用get方法，是用of(context)还是current取决于接口中有没有传入context，其他的依此类推修改即可。

修改完成之后，运行flutter run查看，会发现界面已经显示成了中文；更神奇的是，当你把手机的系统语言改成英文的时候，界面也自动变成了英文。

在下一节中，我们将学习另外一种国际化的方法，不使用intl插件，也是官方推荐的方法

---

本文为原创文章，转载请注明出处，欢迎访问作者网站（和而不同）