Flutter 中的国际化

一、前言

从 2015 年接触 Flutter 到现在也有两年多时间，在这期间我并没有正真地去了解这个神奇的框架，只是时不时拉取 master 的最新代码，编一下 flutter_gallery 看看有什么新特性。但随着此次 GDD 的召开，Flutter 被 Google 带到了国内开发者的眼前，相信谷歌是已经准备好让 Flutter 走上移动开发历史的舞台了。

一款好的移动应用该具备什么品质？戳中用户痛点的功能，炫酷的 UI 还是流畅的操作体验？这些都很重要，少了其中任何一点都是得不到用户青睐的。但今天我要说的虽然不是前面这三个中的哪一个，但也是少了它就不行的“应用国际化”。

对于开发者来说，在 Android 和 iOS 开发中使用国际化已经是老掉牙的套路了，那么在 Flutter 中该如何使用国际化呢？是否也想 Android 一样只要多配置一个 xml 就能搞定了呢？

二、在 MaterialApp 中添加国际化支持

Flutter 官方鼓励我们在写 Flutter 应用的时候直接从 MaterialApp 开始，原因是 MaterialApp 为我们集成好了很多 Material Design 所必须的控件，如AnimatedThemen、GridPager 等，另外还通过 MaterialApp 配置了全局路由，方便进行页面的切换。既然如此我们就先从 MaterialApp 开始实现国际化。国际化涵盖的不单单只是多国语言，还有文字阅读方向、时间和日期格式等，但本文仅介绍多国语言的适配，它们几种还希望读者自行学习和研究。

通常我们新建的 Flutter 应用是默认不支持多语言的，即使用户在中文环境下，显示的文字仍然是英文，比如下图所示的日期选择对话框：

image

那么怎么样将系统的这些组件国际化呢？首先需要在 pubspec.yaml 中添加如下依赖：

  flutter_localizations:
    sdk: flutter

接着运行：

flutter packages get

以获取依赖库。

当上面两部完成后在 main.dart 中 import 如下：

import 'package:flutter_localizations/flutter_localizations.dart';

然后在 MaterialApp 的构造方法中给 localizationsDelegates 和 supportedLocales 两个可选参数赋值：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
      localizationsDelegates: [                             //此处
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [                                   //此处
        const Locale('zh','CH'),
        const Locale('en','US'),
      ],
    );
  }
}

暂时先不用理解这两个参数是什么意思，此时如果重新运行的话结果如下图：

image

细心的小伙伴可能发现这个 Dialog 中的文字是变成中文了，但背景中的 titlebar 的文字还是英文，难道老司机也翻车了？

其实 titlebar 中的这串文字是属于我们创建的应用的，如下：

home: new MyHomePage(title: 'Flutter Demo Home Page')

Flutter 框架是不知道翻译这句话。

接下来要做的就是我们自己实现一个类似 GlobalMaterialLocalizations的东西，用它来实现多语言。

首先需要准备在应用中用到的字符串，一个刚新建的 Flutter 应用用到了四个字符串，如下

Flutter Demo
Flutter Demo Home Page
You have pushed the button this many times:
Increment

这里为了简单我们只增加中文，依次对应为：

Flutter 示例
Flutter 示例主页面
你一共点击了这么多次按钮：
增加

两种文字准备后就可以着手写 Localizations 了，此处的 Localizations 是多国语言资源的汇总。在这里我自定义一个名为 DemoLocalizations 的类,然后将多国资源整合进此类：

class DemoLocalizations {

  final Locale locale;

  DemoLocalizations(this.locale);

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'task title': 'Flutter Demo',
      'titlebar title': 'Flutter Demo Home Page',
      'click tip': 'You have pushed the button this many times:',
      'inc':'Increment'
    },
    'zh': {
      'task title': 'Flutter 示例',
      'titlebar title': 'Flutter 示例主页面',
      'click tip': '你一共点击了这么多次按钮：',
      'inc':'增加'
    }
  };

  get taskTitle{
    return _localizedValues[locale.languageCode]['task title'];
  }

  get titleBarTitle{
    return _localizedValues[locale.languageCode]['titlebar title'];
  }

  get clickTop{
    return _localizedValues[locale.languageCode]['click tip'];
  }
  
  get inc{
    return _localizedValues[locale.languageCode]['inc'];
  }
}

此时只要能拿到 DemoLocalizations 的对象实例，就可以调用它的taskTitle、titleBarTitle、clickTop这三个方法来获取对应的字符串。

定义完 DemoLocalizations 以后，我们就需要想这么一个问题，这个类是谁负责初始化呢？答案自然不是我们自己主动去初始化，而是需要一个叫做 LocalizationsDelegate的类来完成，LocalizationsDelegate 是一个抽象类，需要我们去实现它：

class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations>{

  const DemoLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en','zh'].contains(locale.languageCode);
  }

  @override
  Future<DemoLocalizations> load(Locale locale) {
    return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale));
  }

  @override
  bool shouldReload(LocalizationsDelegate<DemoLocalizations> old) {
    return false;
  }

  static DemoLocalizationsDelegate delegate = const DemoLocalizationsDelegate();
}

注意 load 方法，DemoLocalizations就是在此方法内被初始化的。

接着将 DemoLocalizationsDelegate 添加进 MaterialApp：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,                 //添加在此处
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

DemoLocalizationsDelegate 已经被添加进 MaterialApp，那我们该如何使用 DemoLocalizations 呢？这里就要介绍另一个 Weidget 的子类 Localizations，注意此处的 Localizations 它是一个货真价实 Widget。DemoLocalizationsDelegate 这个类的对象虽然被传入了 MaterialApp，但由于 MaterialApp 会在内部嵌套 Localizations 这个 Widget，而 LocalizationsDelegate 正是其构造方法必须的参数：

  Localizations({
    Key key,
    @required this.locale,
    @required this.delegates,                              //此处
    this.child,
  }) : assert(locale != null),
       assert(delegates != null),
       assert(delegates.any(
               (LocalizationsDelegate<dynamic> delegate)
                 => delegate is LocalizationsDelegate<WidgetsLocalizations>)
             ),
       super(key: key);

而 DemoLocalizations 的实例也是在 Localizations 中通过 DemoLocalizationsDelegate 实例化的。所以在应用中要使用 DemoLocalizations 的实例自然是需要通过 Localizations 这个 Widget 来获取的，代码如下：

Localizations.of(context, DemoLocalizations);

of这个静态方法就会返回 DemoLocalizations 的实例，现在先别管其内部是如何实现的。我们将这行代码放入 DemoLocalizations 中以方便使用：

class DemoLocalizations {

  final Locale locale;

  DemoLocalizations(this.locale);

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'task title': 'Flutter Demo',
      'titlebar title': 'Flutter Demo Home Page',
      'click tip': 'You have pushed the button this many times:',
      'inc':'Increment'
    },
    'zh': {
      'task title': 'Flutter 示例',
      'titlebar title': 'Flutter 示例主页面',
      'click tip': '你一共点击了这么多次按钮：',
      'inc':'增加'
    }
  };

  get taskTitle{
    return _localizedValues[locale.languageCode]['task title'];
  }

  get titleBarTitle{
    return _localizedValues[locale.languageCode]['titlebar title'];
  }

  get clickTop{
    return _localizedValues[locale.languageCode]['click tip'];
  }

  get inc{
    return _localizedValues[locale.languageCode]['inc'];
  }

  //此处
  static DemoLocalizations of(BuildContext context){
    return Localizations.of(context, DemoLocalizations);
  }
}

接下来就是真正使用 DemoLocalizations 的时候了，在代码中将原来的字符串替换如下：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: DemoLocalizations.of(context).taskTitle,                           // 此处1
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: DemoLocalizations.of(context).titleBarTitle), // 此处2
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    showDatePicker(context: context,
        initialDate: new DateTime.now(),
        firstDate: new DateTime.now().subtract(new Duration(days: 30)),
        lastDate: new DateTime.now().add(new Duration(days: 30))).then((v) {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              DemoLocalizations.of(context).clickTop,                          // 此处3
            ),
            new Text(
              '$_counter',
              style: Theme
                  .of(context)
                  .textTheme
                  .display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: DemoLocalizations.of(context).inc,                           // 此处4
        child: new Icon(Icons.add),
      ),
    );
  }
}

运行！！

image

😂😂😂

当遇到这种突如其来的问题的时候一定要淡定，喝口水，眺望一会远方。。。

接着仔细看报错信息：The getter 'taskTitle' was called on null.说的很明确，在 1 处出现了空指针，我们没有像预想的一样拿到 DemoLocalizations 对象。那问题一定出在 Localizations.of 方法内部，跟进去看看：

  static T of<T>(BuildContext context, Type type) {
    assert(context != null);
    assert(type != null);
    final _LocalizationsScope scope =       
             context.inheritFromWidgetOfExactType(_LocalizationsScope); // 此处
    return scope?.localizationsState?.resourcesFor<T>(type);
  }

关键在 context.inheritFromWidgetOfExactType处，继续进去：

InheritedWidget inheritFromWidgetOfExactType(Type targetType);

很简单，这是一个抽象 BuildContext 的抽象方法。此时如果再要继续追踪实现类就比较困难了，通过这个方法的注释可以知道，它是通过 targetType 来获取 context 最近父节点的对象，前提条件是 targetType 对应的类必须是 InheriteWidget 的子类。通过查看 _LocalizationsScope发现其正是继承自 InheriteWidget。那就是说没有从 context 的父节点中找到 _LocalizationsScope。此时我们再看一下调用 taskTitle 的地方：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: DemoLocalizations.of(context).taskTitle,                           // 此处
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: DemoLocalizations.of(context).titleBarTitle),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

仔细看 taskTitle 处的 context 是从最外层的 build 方法中传入的，而在之前说过 Localizations 这个组件是在 MaterialApp 中被嵌套的，也就是说能找到 DemoLocalizations 的 context 至少需要是 MaterialApp 内部的，而此时的 context 是无法找到 DemoLocalizations 对象的。但这样进入死胡同了，实现多语言的 DemoLocalizations 需要在 MaterialApp 内部才能被找到，而这里的 title 用到的 context 是在 MaterialApp 外部的。

难道多语言在 title 上没法实现？

喝口水，眺望下远方。

既然如此我们不如看下这个 title 的说明：

  /// A one-line description used by the device to identify the app for the user.
  ///
  /// On Android the titles appear above the task manager's app snapshots which are
  /// displayed when the user presses the "recent apps" button. Similarly, on
  /// iOS the titles appear in the App Switcher when the user double presses the
  /// home button.
  ///
  /// To provide a localized title instead, use [onGenerateTitle].
  ///
  /// This value is passed unmodified to [WidgetsApp.title].
  final String title;

请注意这句：To provide a localized title instead, use [onGenerateTitle].

没想到啊，如果要对 title 进行多语言处理还需要 onGenerateTitle这个属性。那就简单了，更改如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      onGenerateTitle: (context){                                              // 此处
        return DemoLocalizations.of(context).taskTitle;
      },
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: DemoLocalizations.of(context).titleBarTitle),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

此时运行会发现 taskTitle 处已经没问题了，但 titleBarTitle 这边还是报错，原因一样它的 context 使用的是 MaterialApp 外部的 context。但这里的 title 是可以被移动到 MyHomePage 内部初始的，所以很好修改，将 MyHomePage 构造方法中的 title 参数移除，直接在 AppBar 内部赋值：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    showDatePicker(context: context,
        initialDate: new DateTime.now(),
        firstDate: new DateTime.now().subtract(new Duration(days: 30)),
        lastDate: new DateTime.now().add(new Duration(days: 30))).then((v) {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(DemoLocalizations.of(context).titleBarTitle),            // 此处
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              DemoLocalizations.of(context).clickTop,
            ),
            new Text(
              '$_counter',
              style: Theme
                  .of(context)
                  .textTheme
                  .display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: DemoLocalizations.of(context).inc,
        child: new Icon(Icons.add),
      ),
    );
  }
}

再运行：

image

完美。

三、国际化的初始化过程

上一节中简单介绍了如何在 MaterialApp 实现国际化，各位可能也注意到了最终语言资源的选择还是留给了 DemoLocalizations，而对语言资源本身是以什么形式存在没有特别规定。在上文中我将两国的语言放到了一个 Map 中，自然也可以将其放在服务器上，在程序启动后进行拉取，这些都是后话了，在这一节中我简单剖析下源码，看看 DemoLocalizatins 是如何在程序运行后被初始化的。

上面已经说过官方鼓励我们使用 MaterialApp 作为程序入口，我们就从 MaterialApp 出发，首先看 MaterialApp 的构造方法：

  MaterialApp({ // can't be const because the asserts use methods on Map :-(
    Key key,
    this.title: '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.home,
    this.routes: const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.locale,
    this.localizationsDelegates,
    this.localeResolutionCallback,
    this.supportedLocales: const <Locale>[const Locale('en', 'US')],
    this.navigatorObservers: const <NavigatorObserver>[],
    this.debugShowMaterialGrid: false,
    this.showPerformanceOverlay: false,
    this.checkerboardRasterCacheImages: false,
    this.checkerboardOffscreenLayers: false,
    this.showSemanticsDebugger: false,
    this.debugShowCheckedModeBanner: true
  })

上面的 localizationsDelegates是多语言的关键点，由于 MaterialApp 是一个 StatefulWidget，所以直接看其对应的 State 类 _MaterialAppState中的 build 方法，代码有点长：

Widget build(BuildContext context) {
    final ThemeData theme = widget.theme ?? new ThemeData.fallback();
    Widget result = new AnimatedTheme(                                // 1
      data: theme,
      isMaterialAppTheme: true,
      child: new WidgetsApp(                                          //2
        key: new GlobalObjectKey(this),
        title: widget.title,
        onGenerateTitle: widget.onGenerateTitle,
        textStyle: _errorTextStyle,
        // blue is the primary color of the default theme
        color: widget.color ?? theme?.primaryColor ?? Colors.blue,
        navigatorObservers:
            new List<NavigatorObserver>.from(widget.navigatorObservers)
              ..add(_heroController),
        initialRoute: widget.initialRoute,
        onGenerateRoute: _onGenerateRoute,
        onUnknownRoute: _onUnknownRoute,
        locale: widget.locale,
        localizationsDelegates: _localizationsDelegates,                  //3
        localeResolutionCallback: widget.localeResolutionCallback,
        supportedLocales: widget.supportedLocales,
        showPerformanceOverlay: widget.showPerformanceOverlay,
        checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages,
        checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers,
        showSemanticsDebugger: widget.showSemanticsDebugger,
        debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner,
        inspectorSelectButtonBuilder: (BuildContext context, VoidCallback onPressed) {
          return new FloatingActionButton(
            child: const Icon(Icons.search),
            onPressed: onPressed,
            mini: true,
          );
        },
      )
    );

    assert(() {
      if (widget.debugShowMaterialGrid) {    //此处如果有配置，则会显示网格
        result = new GridPaper(
          color: const Color(0xE0F9BBE0),
          interval: 8.0,
          divisions: 2,
          subdivisions: 1,
          child: result,
        );
      }
      return true;
    }());

    return new ScrollConfiguration(                                // 4
      behavior: new _MaterialScrollBehavior(),
      child: result,
    );
  }

首先在 3 处可以看到 _localizationsDelegates 被赋值给了 WidgetsApp 的 localizationsDelegates 参数。在看 1、2、4 处分别又在原有的 Widget 上做了包裹，此时的 widget 树层次如下图：

[图片上传失败...(image-74770b-1525245587456)]

接着进入 WidgetApp ，它也是个 StatefulWidget，直接看它的 State 类 _WidgetsAppState的 build 方法：

 Widget build(BuildContext context) {
    Widget result = new Navigator(                                    // 1
      key: _navigator,
      initialRoute: widget.initialRoute ?? ui.window.defaultRouteName,
      onGenerateRoute: widget.onGenerateRoute,
      onUnknownRoute: widget.onUnknownRoute,
      observers: widget.navigatorObservers,
    );

    if (widget.textStyle != null) {
      result = new DefaultTextStyle(                                    //2
        style: widget.textStyle,
        child: result,
      );
    }

    ... //此处省略调试相关代码

    return new MediaQuery(                                              //3
      data: new MediaQueryData.fromWindow(ui.window),
      child: new Localizations(                                         //4
        locale: widget.locale ?? _locale,
        delegates: _localizationsDelegates.toList(),
        // This Builder exists to provide a context below the Localizations widget.
        // The onGenerateCallback() can refer to Localizations via its context
        // parameter.
        child: new Builder(                                             //5
          builder: (BuildContext context) {
            String title = widget.title;
            if (widget.onGenerateTitle != null) {
              title = widget.onGenerateTitle(context);
              assert(title != null, 'onGenerateTitle must return a non-null String');
            }
            return new Title(                                            //6
              title: title,
              color: widget.color,
              child: result,
            );
          },
        ),
      ),
    );
  }

在 4 处终于见到了我们熟悉的身影 Localizatins。_localizationsDelegates 也是被传递进了 Localizations。此时的 widget 树层次如下：

[图片上传失败...(image-901681-1525245587456)]

层次如此之多，但我们关心只是其中的 Localizations，所以抛开其他不看，进入 Localizations 看看。

不出意外 Localizations 也是一个 StatefulWidget，此时我们不需要关心它的 build 方法，而是应该关注其内部的 initState 方法，如果有数据需要初始化，不出意外就是在这里进行。

initState 方法很短：

  @override
  void initState() {
    super.initState();
    load(widget.locale);
  }

继续进入 load 方法：

  void load(Locale locale) {
    final Iterable<LocalizationsDelegate<dynamic>> delegates = widget.delegates; // 1
    if (delegates == null || delegates.isEmpty) {
      _locale = locale;
      return;
    }

    Map<Type, dynamic> typeToResources;
    final Future<Map<Type, dynamic>> typeToResourcesFuture = _loadAll(locale, delegates) //2
      .then((Map<Type, dynamic> value) {
        return typeToResources = value;
      });
    
    ...
  
  }

1 处的 delegates 即一开始从 MaterialApp 传入的 delegate 数组，这里转成立可迭代对象。接着看 2 处的 _loadAll 方法返回的 typeToResourcesFuture ，其中的值类型为 Map<Type, dynamic>，这里可以推敲出来里边的 Type 对应的就是不同的 Localizations，而 dynamic 则是其实例。带着这样的想法看 _loadAll 方法：

Future<Map<Type, dynamic>> _loadAll(Locale locale, Iterable<LocalizationsDelegate<dynamic>> allDelegates) {
  final Map<Type, dynamic> output = <Type, dynamic>{};
  List<_Pending> pendingList;

  // Only load the first delegate for each delegate type that supports
  // locale.languageCode.
  final Set<Type> types = new Set<Type>();
  final List<LocalizationsDelegate<dynamic>> delegates = <LocalizationsDelegate<dynamic>>[];
  for (LocalizationsDelegate<dynamic> delegate in allDelegates) {
    if (!types.contains(delegate.type) && delegate.isSupported(locale)) {
      types.add(delegate.type);
      delegates.add(delegate);          
    }
  }

  for (LocalizationsDelegate<dynamic> delegate in delegates) {
    final Future<dynamic> inputValue = delegate.load(locale);    // 1
    dynamic completedValue;
    final Future<dynamic> futureValue = inputValue.then<dynamic>((dynamic value) {
      return completedValue = value;                             // 2
    });
    if (completedValue != null) { // inputValue was a SynchronousFuture
      final Type type = delegate.type;
      assert(!output.containsKey(type));
      output[type] = completedValue;
    } else {
      pendingList ??= <_Pending>[];
      pendingList.add(new _Pending(delegate, futureValue));
    }
  }

  // All of the delegate.load() values were synchronous futures, we're done.
  if (pendingList == null)
    return new SynchronousFuture<Map<Type, dynamic>>(output);

  // Some of delegate.load() values were asynchronous futures. Wait for them.
  return Future.wait<dynamic>(pendingList.map((_Pending p) => p.futureValue))
    .then<Map<Type, dynamic>>((List<dynamic> values) {
      assert(values.length == pendingList.length);
      for (int i = 0; i < values.length; i += 1) {
        final Type type = pendingList[i].delegate.type;
        assert(!output.containsKey(type));
        output[type] = values[i];
      }
      return output;
    });
}

看 1 处，调用到了 deletegate 的 load 方法，返回一个 Future ，这里为什么不直接返回DemoLocalizations 的实例而要返回 Future，这个在前面也提到了如果你的资源是放在服务器上的，那么这就是一个耗时操作，所以在此处用了 Future。

  @override
  Future<DemoLocalizations> load(Locale locale) {
    return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale));
  }

由于这里返回的是 SynchronousFuture ，所以在 2 处的代码会被顺序执行，此时 completedValue 就是 DemoLocalizations 的实例对象了。然后 completedValue 被放入了 output 接着就返回出去了，最后赋值给了 _LocalizationsState 的 _typeToResources 变量。

到目前为止整个多语言的加载就完成了，剩下的就是等着被使用。下面看一下使用的方式：

DemoLocalizations.of(context).taskTitle

简单粗暴，根本看不出来是怎么拿到 DemoLocalizations 对象的。不多说，看代码：

return Localizations.of(context, DemoLocalizations);

内部调用的是 Localizations 的 of 静态方法，接着看：

static T of<T>(BuildContext context, Type type) {
  assert(context != null);
  assert(type != null);
  final _LocalizationsScope scope = context.inheritFromWidgetOfExactType(_LocalizationsScope);
  return scope?.localizationsState?.resourcesFor<T>(type);
}

前面已经讲解过 context.inheritFromWidgetOfExactType 的作用，这里的 scope 就是最靠近 context 节点的 _LocalizationsScope 类型的节点。但我们看了上面的 widget 树的层次图，并没有看到 _LocalizationsScope 这个 widget,它是在什么时候被添加进去的呢？

回到 _LocalizationsState 的 build 方法：

  @override
  Widget build(BuildContext context) {
    if (_locale == null)
      return new Container();
    return new _LocalizationsScope(
      key: _localizedResourcesScopeKey,
      locale: _locale,
      localizationsState: this,
      typeToResources: _typeToResources,
      child: new Directionality(
        textDirection: _textDirection,
        child: widget.child,
      ),
    );
  }

真想(●—●)。在 Localizations 的内部，它将它原本的子节点外又嵌套了 Directionality、_LocalizationsScope、Container 这三层。其中 _LocalizationsScope 就是我们想找的。

接着看：

  return scope?.localizationsState?.resourcesFor<T>(type);

此处调用了 _LocalizationsState 的 resourcesFor 方法：

  T resourcesFor<T>(Type type) {
    assert(type != null);
    final T resources = _typeToResources[type];
    return resources;
  }

到这差不多就结束了，这里根据 type 从 _typeToResources 中取出了 DemoLocalizations 的实例。
最后再把完整的 widget 树的层次展示一下：

[图片上传失败...(image-d220cd-1525245587456)]

四、简单的 App 内语言切换

下面我见到介绍一下如何在不切换手机系统的语言的情况下来切换 Flutter 应用内的语言。主要用到的是 Localizations 的 override 方法。具体不多介绍，看下面我自定义的 StatefulWidget 类 FreeLocalizations 和它的 State 类 _FreeLocalizations：

class FreeLocalizations extends StatefulWidget{

  final Widget child;

  FreeLocalizations({Key key,this.child}):super(key:key);

  @override
  State<FreeLocalizations> createState() {
    return new _FreeLocalizations();
  }
}

class _FreeLocalizations extends State<FreeLocalizations>{

  Locale _locale = const Locale('zh','CH');

  changeLocale(Locale locale){
    setState((){
      _locale = locale;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return new Localizations.override(
      context: context,
      locale: _locale,
      child: widget.child,
    );
  }
}

上面代码的意思比较清晰，就是在调用 changeLocale 方法的时候修改其内部 widget 的语言。
下面来如何使用：

void main() {
  runApp(new MyApp());
}

GlobalKey<_FreeLocalizations> freeLocalizationStateKey = new GlobalKey<_FreeLocalizations>();   // 1
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      onGenerateTitle: (context){
        return DemoLocalizations.of(context).taskTitle;
      },
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Builder(builder: (context){
        return new FreeLocalizations(
          key: freeLocalizationStateKey,
          child: new MyHomePage(),
        );
      }),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

注意想要在 FreeLocalizations 外部去调用其方法需要使用到 GlobalKey 的帮助，用法见 1 处。让后我们将 MyHomePage 放入 FreeLocalizations 内部。

接着在点击按钮的时候调用如下方法：

  void changeLocale(){
    if(flag){
      freeLocalizationStateKey.currentState.changeLocale(const Locale('zh',"CH"));
    }else{
      freeLocalizationStateKey.currentState.changeLocale(const Locale('en',"US"));
    }
    flag = !flag;
  }

效果如下：

image

这一小节我讲的比较简单，但如果你看明白了二、三两节，那弄明白这里多语言是怎么切换的应该是比较容易的。

五、总结

思维导图地址：https://my.mindnode.com/7u6RudyGs5bqzX1WrxY5XtZZqUDBzqvL2NioVbrr
文章中出现的代码的地址：https://github.com/flutter-dev/internationalizing

最后编辑于：2018.05.02 15:24:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

Flutter 中的国际化

一、前言

二、在 MaterialApp 中添加国际化支持

三、国际化的初始化过程

四、简单的 App 内语言切换

五、总结

推荐阅读更多精彩内容