前面讲了Material组件库如何支持国际化，本节我们将介绍一下我们自己的UI中如何支持多语言。根据上节所述，我们需要实现两个类：一个Delegate类一个Localizations类

实现Localizations类

我们已经知道Localizations类中主要实现提供了本地化值，如文本：

  1. class DemoLocalizations {
  2.   DemoLocalizations(this.locale);
  4.   final Locale locale; //接收系统当前的语言是什么
  6.   static DemoLocalizations of(BuildContext context) {
  7.     return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
  8.   }
  10.  //为了使用方便，我们定义一个静态方法
  11.   static Map<String, Map<String, String>> _localizedValues = {
  12.     'en': {
  13.       'title': 'Hello World',
  14.     },
  15.     'es': {
  16.       'title': 'Hola Mundo',
  17.     },
  18.     'zh': {
  19.       'title': '你好呀',
  20.     },
  21.   };
  23.   String get title {
  24.     return _localizedValues[locale.languageCode]['title'];
  25.   }
  26. }

DemoLocalizations中会根据当前的语言来返回不同的文本，如title，我们可以将所有需要支持多语言的文本都在此类中定义。DemoLocalizations的实例将会在Delegate类的load方法中创建。

实现LocalizationsDelegate代理类

Delegate类的职责是在Locale改变时加载新的Locale资源，所以它有一个 方法，Delegate类需要继承自LocalizationsDelegate类，实现相应的接口，示例如下：

  1. class DemoLocalizationsDelegate
  2.     extends LocalizationsDelegate<DemoLocalizations> {
  3.   const DemoLocalizationsDelegate();
  5.   //是否支持某个Local
  6.   @override
  7.   bool isSupported(Locale locale) =>
  8.       ['en', 'es', 'zh'].contains(locale.languageCode);
  10.   // Flutter会调用此类加载相应的Locale资源类
  11.   @override
  12.   Future<DemoLocalizations> load(Locale locale) {
  13.     return SynchronousFuture<DemoLocalizations>(DemoLocalizations(locale));
  14.   }
  16.   @override
  17.   bool shouldReload(DemoLocalizationsDelegate old) => false;
  18. }

shouldReload的返回值决定当Localizations组件重新build时，是否调用load方法重新加载Locale资源。

  • 一般情况下，Locale资源只应该在Locale切换时加载一次，不需要每次在Localizations重新build时都加载，所以返回false即可
  • 可能有些人会担心返回false的话在APP启动后用户再改变系统语言时load方法将不会被调用，所以Locale资源将不会被加载
  • 事实上，每当Locale改变时Flutter都会再调用load方法加载新的Locale，无论shouldReload返回true还是false

最后一步：添加多语言支持

和上一节中介绍的相同，我们现在需要先注册DemoLocalizationsDelegate类，然后再通过DemoLocalizations.of(context)来动态获取当前Locale文本。
只需要在MaterialApp或WidgetsApp的localizationsDelegates列表中添加我们的Delegate实例即可完成注册：

  1. localizationsDelegates: [
  2.   DemoLocalizationsDelegate(), // 这是我们新建的代理
  3.   GlobalMaterialLocalizations.delegate,
  4.   GlobalWidgetsLocalizations.delegate,
  5. ],

接下来我们可以在Widget中使用Locale值：

  1. return Scaffold(
  2.   appBar: AppBar(
  3.     //使用Locale title  
  4.     title: Text(DemoLocalizations.of(context).title),
  5.   ),
  6.   ... //省略无关代码
  7.  ）

这样，当在美国英语和中文简体之间切换系统语言时，APP的标题将会分别为“Flutter APP”和“Flutter应用”。

完整代码

  1. import 'package:flutter/foundation.dart';
  2. import 'package:flutter/material.dart';
  3. import 'dart:async';
  4. import 'package:flutter_localizations/flutter_localizations.dart';
  6. void main() => runApp(MyApp());
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return new MaterialApp(
  12.       title: '国际化',
  13.       theme: new ThemeData(
  14.         primarySwatch: Colors.blue,
  15.       ),
  16.       localizationsDelegates: [
  17.         DemoLocalizationsDelegate(), // 这是我们新建的代理
  18.         GlobalMaterialLocalizations.delegate,
  19.         GlobalWidgetsLocalizations.delegate,
  20.       ],
  21.       supportedLocales: [
  22.         const Locale('en', 'US'), // English
  23.         const Locale('he', 'IL'), // Hebrew
  24.         const Locale('zh', ''), // 新添中文，后面的countryCode暂时不指定
  25.       ],
  26.       home: new MyHomePage(title: '国际化'),
  27.     );
  28.   }
  29. }
  31. class MyHomePage extends StatefulWidget {
  32.   final String title;
  33.   MyHomePage({Key key, this.title}) : super(key: key);
  35.   @override
  36.   _MyHomePageState createState() => _MyHomePageState();
  37. }
  39. class _MyHomePageState extends State<MyHomePage> {
  40.   @override
  41.   Widget build(BuildContext context) {
  42.     DemoLocalizations localizations = DemoLocalizations.of(context);
  43.     print(localizations.title);
  45.     return Scaffold(
  46.       appBar: AppBar(title: Text(widget.title)),
  47.       body: Text(DemoLocalizations.of(context).title), //使用Locale title
  48.     );
  49.   }
  50. }
  52. class DemoLocalizationsDelegate
  53.     extends LocalizationsDelegate<DemoLocalizations> {
  54.   const DemoLocalizationsDelegate();
  56.   //是否支持某个Local
  57.   @override
  58.   bool isSupported(Locale locale) =>
  59.       ['en', 'es', 'zh'].contains(locale.languageCode);
  61.   // Flutter会调用此类加载相应的Locale资源类
  62.   @override
  63.   Future<DemoLocalizations> load(Locale locale) {
  64.     return SynchronousFuture<DemoLocalizations>(DemoLocalizations(locale));
  65.   }
  67.   @override
  68.   bool shouldReload(DemoLocalizationsDelegate old) => false;
  69. }
  71. class DemoLocalizations {
  72.   final Locale locale; //接收系统当前的语言是什么
  74.   DemoLocalizations(this.locale);
  76.   static DemoLocalizations of(BuildContext context) {
  77.     return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
  78.   }
  80.   //为了使用方便，我们定义一个静态方法
  81.   static Map<String, Map<String, String>> _localizedValues = {
  82.     'en': {
  83.       'title': 'Hello World',
  84.     },
  85.     'es': {
  86.       'title': 'Hola Mundo',
  87.     },
  88.     'zh': {
  89.       'title': '你好呀',
  90.     },
  91.   };
  93.   String get title {
  94.     return _localizedValues[locale.languageCode]['title'];
  95.   }
  96. }

总结

本节我们通过一个简单的示例说明了Flutter应用国际化的基本过程及原理。但是上面的实例还有一个严重的不足就是我们需要在DemoLocalizations类中获取title时手动的判断当前语言Locale，然后返回合适的文本。试想一下，当我们要支持的语言不是两种而是8种甚至20几种时，如果为每个文本属性都要分别去判断到底是哪种Locale从而获取相应语言的文本将会是一件非常复杂的事。还有，通常情况下翻译人员并不是开发人员，能不能像i18n或l10n标准那样可以将翻译单独保存为一个arb文件交由翻译人员去翻译，翻译好之后开发人员再通过工具将arb文件转为代码。答案是肯定的！我们将在下一节介绍如何通过Dart intl包来实现这些。