AV青青草在线观看,欧美依人网4412,激情欧美射12

一、前言

從 2015 年接觸 Flutter 到現(xiàn)在也有兩年多時(shí)間，在這期間我并沒(méi)有正真地去了解這個(gè)神奇的框架，只是時(shí)不時(shí)拉取 master 的最新代碼，編一下 flutter_gallery 看看有什么新特性。但隨著此次 GDD 的召開(kāi)，F(xiàn)lutter 被 Google 帶到了國(guó)內(nèi)開(kāi)發(fā)者的眼前，相信谷歌是已經(jīng)準(zhǔn)備好讓 Flutter 走上移動(dòng)開(kāi)發(fā)歷史的舞臺(tái)了。

一款好的移動(dòng)應(yīng)用該具備什么品質(zhì)？戳中用戶痛點(diǎn)的功能，炫酷的 UI 還是流暢的操作體驗(yàn)？這些都很重要，少了其中任何一點(diǎn)都是得不到用戶青睞的。但今天我要說(shuō)的雖然不是前面這三個(gè)中的哪一個(gè)，但也是少了它就不行的“應(yīng)用國(guó)際化”。

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，在 Android 和 iOS 開(kāi)發(fā)中使用國(guó)際化已經(jīng)是老掉牙的套路了，那么在 Flutter 中該如何使用國(guó)際化呢？是否也想 Android 一樣只要多配置一個(gè) xml 就能搞定了呢？

二、在 MaterialApp 中添加國(guó)際化支持

Flutter 官方鼓勵(lì)我們?cè)趯?xiě) Flutter 應(yīng)用的時(shí)候直接從 MaterialApp 開(kāi)始，原因是 MaterialApp 為我們集成好了很多 Material Design 所必須的控件，如AnimatedThemen、GridPager 等，另外還通過(guò) MaterialApp 配置了全局路由，方便進(jìn)行頁(yè)面的切換。既然如此我們就先從 MaterialApp 開(kāi)始實(shí)現(xiàn)國(guó)際化。國(guó)際化涵蓋的不單單只是多國(guó)語(yǔ)言，還有文字閱讀方向、時(shí)間和日期格式等，但本文僅介紹多國(guó)語(yǔ)言的適配，它們幾種還希望讀者自行學(xué)習(xí)和研究。

通常我們新建的 Flutter 應(yīng)用是默認(rèn)不支持多語(yǔ)言的，即使用戶在中文環(huán)境下，顯示的文字仍然是英文，比如下圖所示的日期選擇對(duì)話框：

image

那么怎么樣將系統(tǒng)的這些組件國(guó)際化呢？首先需要在 pubspec.yaml 中添加如下依賴(lài)：

  flutter_localizations:
    sdk: flutter

接著運(yùn)行：

flutter packages get

以獲取依賴(lài)庫(kù)。

當(dāng)上面兩部完成后在 main.dart 中 import 如下：

import 'package:flutter_localizations/flutter_localizations.dart';

然后在 MaterialApp 的構(gòu)造方法中給 localizationsDelegates 和 supportedLocales 兩個(gè)可選參數(shù)賦值：

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'),
      ],
    );
  }
}

暫時(shí)先不用理解這兩個(gè)參數(shù)是什么意思，此時(shí)如果重新運(yùn)行的話結(jié)果如下圖：

image

細(xì)心的小伙伴可能發(fā)現(xiàn)這個(gè) Dialog 中的文字是變成中文了，但背景中的 titlebar 的文字還是英文，難道老司機(jī)也翻車(chē)了？

其實(shí) titlebar 中的這串文字是屬于我們創(chuàng)建的應(yīng)用的，如下：

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

Flutter 框架是不知道翻譯這句話。

接下來(lái)要做的就是我們自己實(shí)現(xiàn)一個(gè)類(lèi)似 GlobalMaterialLocalizations的東西，用它來(lái)實(shí)現(xiàn)多語(yǔ)言。

首先需要準(zhǔn)備在應(yīng)用中用到的字符串，一個(gè)剛新建的 Flutter 應(yīng)用用到了四個(gè)字符串，如下

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

這里為了簡(jiǎn)單我們只增加中文，依次對(duì)應(yīng)為：

Flutter 示例
Flutter 示例主頁(yè)面
你一共點(diǎn)擊了這么多次按鈕：
增加

兩種文字準(zhǔn)備后就可以著手寫(xiě) Localizations 了，此處的 Localizations 是多國(guó)語(yǔ)言資源的匯總。在這里我自定義一個(gè)名為 DemoLocalizations 的類(lèi),然后將多國(guó)資源整合進(jìn)此類(lèi)：

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 示例主頁(yè)面',
      'click tip': '你一共點(diǎn)擊了這么多次按鈕：',
      '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'];
  }
}

此時(shí)只要能拿到 DemoLocalizations 的對(duì)象實(shí)例，就可以調(diào)用它的taskTitle、titleBarTitle、clickTop這三個(gè)方法來(lái)獲取對(duì)應(yīng)的字符串。

定義完 DemoLocalizations 以后，我們就需要想這么一個(gè)問(wèn)題，這個(gè)類(lèi)是誰(shuí)負(fù)責(zé)初始化呢？答案自然不是我們自己主動(dòng)去初始化，而是需要一個(gè)叫做 LocalizationsDelegate的類(lèi)來(lái)完成，LocalizationsDelegate 是一個(gè)抽象類(lèi)，需要我們?nèi)?shí)現(xiàn)它：

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就是在此方法內(nèi)被初始化的。

接著將 DemoLocalizationsDelegate 添加進(jìn) 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 已經(jīng)被添加進(jìn) MaterialApp，那我們?cè)撊绾问褂?DemoLocalizations 呢？這里就要介紹另一個(gè) Weidget 的子類(lèi) Localizations，注意此處的 Localizations 它是一個(gè)貨真價(jià)實(shí) Widget。DemoLocalizationsDelegate 這個(gè)類(lèi)的對(duì)象雖然被傳入了 MaterialApp，但由于 MaterialApp 會(huì)在內(nèi)部嵌套 Localizations 這個(gè) Widget，而 LocalizationsDelegate 正是其構(gòu)造方法必須的參數(shù)：

  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 的實(shí)例也是在 Localizations 中通過(guò) DemoLocalizationsDelegate 實(shí)例化的。所以在應(yīng)用中要使用 DemoLocalizations 的實(shí)例自然是需要通過(guò) Localizations 這個(gè) Widget 來(lái)獲取的，代碼如下：

Localizations.of(context, DemoLocalizations);

of這個(gè)靜態(tài)方法就會(huì)返回 DemoLocalizations 的實(shí)例，現(xiàn)在先別管其內(nèi)部是如何實(shí)現(xiàn)的。我們將這行代碼放入 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 示例主頁(yè)面',
      'click tip': '你一共點(diǎn)擊了這么多次按鈕：',
      '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);
  }
}

接下來(lái)就是真正使用 DemoLocalizations 的時(shí)候了，在代碼中將原來(lái)的字符串替換如下：

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),
      ),
    );
  }
}

運(yùn)行??！

image

??????

當(dāng)遇到這種突如其來(lái)的問(wèn)題的時(shí)候一定要淡定，喝口水，眺望一會(huì)遠(yuǎn)方。。。

接著仔細(xì)看報(bào)錯(cuò)信息：The getter 'taskTitle' was called on null.說(shuō)的很明確，在 1 處出現(xiàn)了空指針，我們沒(méi)有像預(yù)想的一樣拿到 DemoLocalizations 對(duì)象。那問(wèn)題一定出在 Localizations.of 方法內(nèi)部，跟進(jìn)去看看：

  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);
  }

關(guān)鍵在 context.inheritFromWidgetOfExactType處，繼續(xù)進(jìn)去：

InheritedWidget inheritFromWidgetOfExactType(Type targetType);

很簡(jiǎn)單，這是一個(gè)抽象 BuildContext 的抽象方法。此時(shí)如果再要繼續(xù)追蹤實(shí)現(xiàn)類(lèi)就比較困難了，通過(guò)這個(gè)方法的注釋可以知道，它是通過(guò) targetType 來(lái)獲取 context 最近父節(jié)點(diǎn)的對(duì)象，前提條件是 targetType 對(duì)應(yīng)的類(lèi)必須是 InheriteWidget 的子類(lèi)。通過(guò)查看 _LocalizationsScope發(fā)現(xiàn)其正是繼承自 InheriteWidget。那就是說(shuō)沒(méi)有從 context 的父節(jié)點(diǎn)中找到 _LocalizationsScope。此時(shí)我們?cè)倏匆幌抡{(diào)用 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'),
      ],
    );
  }
}

仔細(xì)看 taskTitle 處的 context 是從最外層的 build 方法中傳入的，而在之前說(shuō)過(guò) Localizations 這個(gè)組件是在 MaterialApp 中被嵌套的，也就是說(shuō)能找到 DemoLocalizations 的 context 至少需要是 MaterialApp 內(nèi)部的，而此時(shí)的 context 是無(wú)法找到 DemoLocalizations 對(duì)象的。但這樣進(jìn)入死胡同了，實(shí)現(xiàn)多語(yǔ)言的 DemoLocalizations 需要在 MaterialApp 內(nèi)部才能被找到，而這里的 title 用到的 context 是在 MaterialApp 外部的。

難道多語(yǔ)言在 title 上沒(méi)法實(shí)現(xiàn)？

喝口水，眺望下遠(yuǎn)方。

既然如此我們不如看下這個(gè) title 的說(shuō)明：

  /// 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;

請(qǐng)注意這句：To provide a localized title instead, use [onGenerateTitle].

沒(méi)想到啊，如果要對(duì) title 進(jìn)行多語(yǔ)言處理還需要 onGenerateTitle這個(gè)屬性。那就簡(jiǎn)單了，更改如下：

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'),
      ],
    );
  }
}

此時(shí)運(yùn)行會(huì)發(fā)現(xiàn) taskTitle 處已經(jīng)沒(méi)問(wèn)題了，但 titleBarTitle 這邊還是報(bào)錯(cuò)，原因一樣它的 context 使用的是 MaterialApp 外部的 context。但這里的 title 是可以被移動(dòng)到 MyHomePage 內(nèi)部初始的，所以很好修改，將 MyHomePage 構(gòu)造方法中的 title 參數(shù)移除，直接在 AppBar 內(nèi)部賦值：

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),
      ),
    );
  }
}

再運(yùn)行：

image

完美。

三、國(guó)際化的初始化過(guò)程

上一節(jié)中簡(jiǎn)單介紹了如何在 MaterialApp 實(shí)現(xiàn)國(guó)際化，各位可能也注意到了最終語(yǔ)言資源的選擇還是留給了 DemoLocalizations，而對(duì)語(yǔ)言資源本身是以什么形式存在沒(méi)有特別規(guī)定。在上文中我將兩國(guó)的語(yǔ)言放到了一個(gè) Map 中，自然也可以將其放在服務(wù)器上，在程序啟動(dòng)后進(jìn)行拉取，這些都是后話了，在這一節(jié)中我簡(jiǎn)單剖析下源碼，看看 DemoLocalizatins 是如何在程序運(yùn)行后被初始化的。

上面已經(jīng)說(shuō)過(guò)官方鼓勵(lì)我們使用 MaterialApp 作為程序入口，我們就從 MaterialApp 出發(fā)，首先看 MaterialApp 的構(gòu)造方法：

  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是多語(yǔ)言的關(guān)鍵點(diǎn)，由于 MaterialApp 是一個(gè) StatefulWidget，所以直接看其對(duì)應(yīng)的 State 類(lèi) _MaterialAppState中的 build 方法，代碼有點(diǎn)長(zhǎng)：

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) {    //此處如果有配置，則會(huì)顯示網(wǎng)格
        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 參數(shù)。在看 1、2、4 處分別又在原有的 Widget 上做了包裹，此時(shí)的 widget 樹(shù)層次如下圖：

[圖片上傳失敗...(image-74770b-1525245587456)]

接著進(jìn)入 WidgetApp ，它也是個(gè) StatefulWidget，直接看它的 State 類(lèi) _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,
      );
    }

    ... //此處省略調(diào)試相關(guān)代碼

    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 處終于見(jiàn)到了我們熟悉的身影 Localizatins。_localizationsDelegates 也是被傳遞進(jìn)了 Localizations。此時(shí)的 widget 樹(shù)層次如下：

[圖片上傳失敗...(image-901681-1525245587456)]

層次如此之多，但我們關(guān)心只是其中的 Localizations，所以拋開(kāi)其他不看，進(jìn)入 Localizations 看看。

不出意外 Localizations 也是一個(gè) StatefulWidget，此時(shí)我們不需要關(guān)心它的 build 方法，而是應(yīng)該關(guān)注其內(nèi)部的 initState 方法，如果有數(shù)據(jù)需要初始化，不出意外就是在這里進(jìn)行。

initState 方法很短：

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

繼續(xù)進(jìn)入 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 即一開(kāi)始從 MaterialApp 傳入的 delegate 數(shù)組，這里轉(zhuǎn)成立可迭代對(duì)象。接著看 2 處的 _loadAll 方法返回的 typeToResourcesFuture ，其中的值類(lèi)型為 Map<Type, dynamic>，這里可以推敲出來(lái)里邊的 Type 對(duì)應(yīng)的就是不同的 Localizations，而 dynamic 則是其實(shí)例。帶著這樣的想法看 _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 處，調(diào)用到了 deletegate 的 load 方法，返回一個(gè) Future ，這里為什么不直接返回DemoLocalizations 的實(shí)例而要返回 Future，這個(gè)在前面也提到了如果你的資源是放在服務(wù)器上的，那么這就是一個(gè)耗時(shí)操作，所以在此處用了 Future。

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

由于這里返回的是 SynchronousFuture ，所以在 2 處的代碼會(huì)被順序執(zhí)行，此時(shí) completedValue 就是 DemoLocalizations 的實(shí)例對(duì)象了。然后 completedValue 被放入了 output 接著就返回出去了，最后賦值給了 _LocalizationsState 的 _typeToResources 變量。

到目前為止整個(gè)多語(yǔ)言的加載就完成了，剩下的就是等著被使用。下面看一下使用的方式：

DemoLocalizations.of(context).taskTitle

簡(jiǎn)單粗暴，根本看不出來(lái)是怎么拿到 DemoLocalizations 對(duì)象的。不多說(shuō)，看代碼：

return Localizations.of(context, DemoLocalizations);

內(nèi)部調(diào)用的是 Localizations 的 of 靜態(tài)方法，接著看：

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);
}

前面已經(jīng)講解過(guò) context.inheritFromWidgetOfExactType 的作用，這里的 scope 就是最靠近 context 節(jié)點(diǎn)的 _LocalizationsScope 類(lèi)型的節(jié)點(diǎn)。但我們看了上面的 widget 樹(shù)的層次圖，并沒(méi)有看到 _LocalizationsScope 這個(gè) widget,它是在什么時(shí)候被添加進(jìn)去的呢？

回到 _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 的內(nèi)部，它將它原本的子節(jié)點(diǎn)外又嵌套了 Directionality、_LocalizationsScope、Container 這三層。其中 _LocalizationsScope 就是我們想找的。

接著看：

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

此處調(diào)用了 _LocalizationsState 的 resourcesFor 方法：

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

到這差不多就結(jié)束了，這里根據(jù) type 從 _typeToResources 中取出了 DemoLocalizations 的實(shí)例。
最后再把完整的 widget 樹(shù)的層次展示一下：

[圖片上傳失敗...(image-d220cd-1525245587456)]

四、簡(jiǎn)單的 App 內(nèi)語(yǔ)言切換

下面我見(jiàn)到介紹一下如何在不切換手機(jī)系統(tǒng)的語(yǔ)言的情況下來(lái)切換 Flutter 應(yīng)用內(nèi)的語(yǔ)言。主要用到的是 Localizations 的 override 方法。具體不多介紹，看下面我自定義的 StatefulWidget 類(lèi) FreeLocalizations 和它的 State 類(lèi) _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,
    );
  }
}

上面代碼的意思比較清晰，就是在調(diào)用 changeLocale 方法的時(shí)候修改其內(nèi)部 widget 的語(yǔ)言。
下面來(lái)如何使用：

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 外部去調(diào)用其方法需要使用到 GlobalKey 的幫助，用法見(jiàn) 1 處。讓后我們將 MyHomePage 放入 FreeLocalizations 內(nèi)部。

接著在點(diǎn)擊按鈕的時(shí)候調(diào)用如下方法：

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

效果如下：

image

這一小節(jié)我講的比較簡(jiǎn)單，但如果你看明白了二、三兩節(jié)，那弄明白這里多語(yǔ)言是怎么切換的應(yīng)該是比較容易的。

五、總結(jié)

思維導(dǎo)圖地址：https://my.mindnode.com/7u6RudyGs5bqzX1WrxY5XtZZqUDBzqvL2NioVbrr
文章中出現(xiàn)的代碼的地址：https://github.com/flutter-dev/internationalizing

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Flutter 中的國(guó)際化

Flutter 中的國(guó)際化

一、前言

二、在 MaterialApp 中添加國(guó)際化支持

三、國(guó)際化的初始化過(guò)程

四、簡(jiǎn)單的 App 內(nèi)語(yǔ)言切換

五、總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Flutter 中的國(guó)際化

一、前言

二、在 MaterialApp 中添加國(guó)際化支持

三、國(guó)際化的初始化過(guò)程

四、簡(jiǎn)單的 App 內(nèi)語(yǔ)言切換

五、總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、前言

五、總結(jié)