Day18 - Flutter - 國際化

概述

國際化的認識
國際化的適配
國際化的工具

一、國際化的認識

開發(fā)一個App撞反，如果我們的App需要面向不同的語種（比如中文鸦列、英文租冠、繁體等），那么我們需要對齊進行國際化開發(fā)薯嗤。
國際化的英文稱呼：internationalization（簡稱為i18n顽爹，取前后兩個字母，18表示中間省略字母的個數(shù)）
App國際化開發(fā)主要包括：文本國際化（包括文本的順序）骆姐，Widget顯示的國際化：
比如我們下面開發(fā)的這個App
某些文本在英文環(huán)境下應該顯示為英文镜粤；
某些Widget在中文環(huán)境下，應該顯示中文（比如彈出的時間選擇器）玻褪；

某些Widget在中文環(huán)境下肉渴，應該顯示中文（比如彈出的時間選擇器）

二、國際化的適配

2.1带射、Widget的國際化
Flutter給我們提供的Widget默認情況下就是支持國際化同规，但是在沒有進行特別的設(shè)置之前，它們無論在什么環(huán)境都是以英文的方式顯示的窟社。
如果想要添加其他語言券勺，你的應用必須指定額外的 MaterialApp 屬性并且添加一個單獨的 package，叫做 flutter_localizations灿里。
截至到 2020 年 2 月份关炼，這個 package 已經(jīng)支持大約 77 種語言。
- 2.1.1匣吊、pubspec.ymal 添加依賴儒拂，想要使用 flutter_localizations 的話，我們需要在 pubspec.yaml 文件中添加它作為依賴如下缀去，記得點擊 Pub get 更新一下
```
dependencies:
    flutter:
       sdk: flutter
    flutter_localizations:
       sdk: flutter
```
- 2.1.2. 設(shè)置 MaterialApp
  - 在localizationsDelegates中指定哪些Widget需要進行國際化
    - 用于生產(chǎn)本地化值集合的工廠
    - 我們這里指定了Material侣灶、Widgets、Cupertino都使用國際化
  - supportedLocales指定要支持哪些國際化：我們這里指定中文和英文（也可以指定國家編碼）
```
MaterialApp(
    localizationsDelegates: [
       // 指定本地化的字符串和一些其他的值
       GlobalMaterialLocalizations.delegate, 
       // 對應的Cupertino風格
       GlobalCupertinoLocalizations.delegate, 
       // 指定默認的文本排列方向, 由左到右或由右到左
       GlobalWidgetsLocalizations.delegate 
    ],
    supportedLocales: [
        Locale('en'),
        Locale('zh')
    ],
);
```
    提示：如果要指定語言代碼缕碎、文字代碼和國家代碼褥影，可以進行如下指定方式：
```
// Full Chinese support for CN, TW, and HK
supportedLocales: [
   const Locale.fromSubtags(languageCode: 'zh'), // generic Chinese 'zh'
   const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // generic simplified Chinese 'zh_Hans'
   const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // generic traditional Chinese 'zh_Hant'
   const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'), // 'zh_Hans_CN'
   const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'), // 'zh_Hant_TW'
   const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'HK'), // 'zh_Hant_HK'
],
```
- 2.1.3. 查看Widget結(jié)果設(shè)置完成后，我們在Android上將語言切換為中文咏雌，查看結(jié)果凡怎，我們可以看到英文的時間Widget里面的文字是中文了
  - 但是對于iOS，將語言切換為中文赊抖，依然顯示是英文的Widget
    - 這是因為iOS定義了一些應用的元數(shù)據(jù)统倒，其中包括支持的語言環(huán)境；
    - 我們必須將其對應的元數(shù)據(jù)中支持的語言添加進去氛雪；
    - 元數(shù)據(jù)的設(shè)置在iOS項目中對應的info.plist文件中房匆；
  - 修改 iOS 的 info.plist 文件配置：
    
    1、Xcode打開工程
    
    2、添加語言的選項Localizations
    
    3浴鸿、選擇Localizations
    
    4井氢、添加中文簡體
    
    配置完成后，卸載之前的app岳链，重新安裝：我們可以看到和安卓模擬器一樣的效果
2.2花竞、其它文本國際化
App中除了有默認的Widget，我們也希望對自己的文本進行國際化
- 2.2.1掸哑、創(chuàng)建本地化類约急，該類用于定義我們需要進行本地化的字符串等信息：
  - 1.我們需要一個構(gòu)造器，并且傳入一個Locale對象（后續(xù)會使用到）
  - 2.定義一個Map苗分，其中存放我們不同語言對應的顯示文本
  - 3.定義它們對應的getter方法厌蔽，根據(jù)語言環(huán)境返回不同的結(jié)果
```
import 'package:flutter/material.dart';

class JKLocalizations {
    final Locale locale;

    JKLocalizations(this.locale);

    static JKLocalizations of(BuildContext context) {
        return Localizations.of(context, JKLocalizations);
    }

    static Map<String, Map<String, String>> _localizedValues = {
       "en": {
           "title": "home",
           "greet": "hello~",
           "picktime": "Pick a Time"
       },
       "zh": {
           "title": "首頁",
           "greet": "你好~",
           "picktime": "選擇一個時間"
       }
    };
    // 標題
    String get title {
        return _localizedValues[locale.languageCode]["title"];
    }
    // 問候
    String get greet {
        return _localizedValues[locale.languageCode]["greet"];
    }
    // 時間
    String get pickTime {
       return _localizedValues[locale.languageCode]["picktime"];
    }
}
```
- 2.2.2、自定義Delegate
  - 上面的類定義好后摔癣，我們在什么位置或者說如何對它進行初始化呢躺枕？
    - 答案是我們可以像Flutter Widget中的國際化方式一樣對它們進行初始化；
    - 也就是我們也定義一個對象的Delegate類供填，并且將其傳入localizationsDelegates中；
    - Delegate的作用就是當Locale發(fā)生改變時罢猪，調(diào)用對應的load方法近她，重新加載新的Locale資源；
  - JKLocalizationsDelegate需要繼承自LocalizationsDelegate膳帕，并且有三個方法必須重寫：
    - isSupported：用于當前環(huán)境的Locale粘捎，是否在我們支持的語言范圍
    - shouldReload：當Localizations Widget重新build時，是否調(diào)用load方法重新加載Locale資源
      - 一般情況下危彩，Locale資源只應該在Locale切換時加載一次攒磨，不需要每次Localizations重新build時都加載一遍；
      - 所以一般情況下返回false即可汤徽；
    - load方法：當Locale發(fā)生改變時（語言環(huán)境）娩缰，加載對應的HYLocalizations資源
      - 這個方法返回的是一個Future，因為有可能是異步加載的谒府；
      - 但是我們這里是直接定義的一個Map拼坎，因此可以直接返回一個同步的Future（SynchronousFuture）
        
        class JKLocalizationsDelegate extends LocalizationsDelegate<JKLocalizations> { @override // 支持的語言 bool isSupported(Locale locale) { return ["en", "zh"].contains(locale.languageCode); } @override bool shouldReload(LocalizationsDelegate<JKLocalizations> old) { return false; } @override Future<JKLocalizations> load(Locale locale) { return SynchronousFuture(JKLocalizations(locale)); } static JKLocalizationsDelegate delegate = JKLocalizationsDelegate(); }
- 2.2.3. 使用本地化類
  - 1>、在MaterialApp的localizationsDelegates里里添加我們的 delegeate
  - 2>完疫、接著我們可以在代碼中使用JKLocalization類泰鸡。
    我們可以通JKYLocalizations.of(context)獲取到JKLocalizations對象，本質(zhì)上是在調(diào)用 Localizations.of(context, JKLocalizations)
```
Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: [
         Text(JKLocalizations.of(context).greet),
         RaisedButton(
            child: Text(JKLocalizations.of(context).pickTime, style: TextStyle(fontSize: 20, color:  Colors.orange),),
            onPressed: () {
                showDatePicker(
                   context: context,
                   initialDate: DateTime.now(),
                   firstDate: DateTime(2000),
                   lastDate: DateTime(3000)
                );
            }
         )
     ],
),
```
- 2.2.4. 異步加載數(shù)據(jù)壳鹤，也就是 JKLocalizations 里面的 _localizedValues 我們做一個抽取
```
static Map<String, Map<String, String>> _localizedValues = {};

// 獲取配置的 Map
Future<bool> loadJson() async {
     // 1.加載json文件
     String jsonString = await rootBundle.loadString("assets/json/i18n.json");

     // 2.轉(zhuǎn)成map類型
     final Map<String, dynamic> map = json.decode(jsonString);

     // 3.注意：這里是將Map<String, dynamic>轉(zhuǎn)成Map<String, Map<String, String>>類型
     _localizedValues = map.map((key, value) {
         return MapEntry(key, value.cast<String, String>());
     });
     return true;
}
```
  提示：這里我們也可以改為網(wǎng)絡請求盛龄，拿到數(shù)據(jù)后一樣轉(zhuǎn)換類型
  
  在 JKLocalizationsDelegate 中使用 異步 進行加載：
```
@override
Future<JKLocalizations> load(Locale locale) async {
   final localization = JKLocalizations(locale);
   await localization.loadJson();
   return localization;
}
```
提示：我們自己的配置其它文本國際化，我們每次都要
- 1、修改 json文件
- 2余舶、在 JKLocalizations 里面增加對應的 get 方法啊鸭，每次還要寫 key ，很容易寫錯欧芽，要注意
- 3莉掂、如果增加新的語言，我們還要修改JKLocalizationsDelegate 增加支持的語言和在 iOS的 info.plist 文件里面增加新的語言類型

三千扔、國際化的工具

3.1憎妙、認識 arb文件
目前我們已經(jīng)可以通過加載對應的json文件來進行本地化了
但是還有另外一個問題，我們在進行國際化的過程中曲楚，下面的代碼依然需要根據(jù) json文件手動編寫：
```
String get title {
   return _localizedValues[locale.languageCode]["title"];
}

String get greet {
   return _localizedValues[locale.languageCode]["greet"];
}

String get pickTime {
   return _localizedValues[locale.languageCode]["picktime"];
}
```
- 有沒有一種更好的方式厘唾，讓我們可以快速在本地化文件-dart代碼文件直接來轉(zhuǎn)換呢？答案就是arb文件
  - arb文件全稱Application Resource Bundle龙誊，表示應用資源包抚垃，目前已經(jīng)得到Google的支持；
  - 其本質(zhì)就是一個 json 文件趟大，但是可以根據(jù)該文件轉(zhuǎn)成對應的語言環(huán)境鹤树；
  - arb 的說明文檔：https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification
3.2、intl package
官方文檔推薦可以使用intl package來進行arb和dart文件之間的轉(zhuǎn)換（通過終端指令）
- https://flutter.dev/docs/development/accessibility-and-localization/internationalization#appendix-using-the-dart-intl-tools
需要在在 pubspec.yaml 中添加其相關(guān)的依賴逊朽，具體步驟這里不再詳細給出罕伯，可以參考官方文檔
3.3、使用IDE插件
- 在之前有一個比較好用的Android Studio的插件：Flutter i18n
  - 但是這個插件已經(jīng)很久不再維護了叽讳，所以不再推薦給大家使用
- 目前我們可以使用另外一個插件：Flutter Intl
  - 該插件更新維護頻率很高追他，并且廣受好評；
  - 另外岛蚤，在Android Studio和VSCode中都是支持的
我們這里以Android Studio為例邑狸，講解其使用過程：
- 3.3.1、安裝插件
  在Android Studio的Plugins中安裝插件：
  
  Flutter Intl
  
  提示：如果遇到如下圖的問題涤妒，可看下圖修復
  
  找不到插件的解決辦法
  
  選擇自動

3.3.2. 初始化 intl
選擇工具欄Tools - Flutter Intl - Initialize for the Project
初始化 intl

生成兩個文件
- 完成上面的操作之后會自動生成如下文件目錄：
  - generated是自動生成的dart代碼
  - I10n 是對應的 arb文件目錄
3.3.3单雾、使用intl
- 在localizationsDelegates中配置生成的class，名字是S
  - 1.添加對應的delegate
  - 2.supportedLocales使用S.delegate.supportedLocales
```
localizationsDelegates: [
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
   JKLocalizationsDelegate.delegate,
   S.delegate
],
supportedLocales: S.delegate.supportedLocales,
```
  因為我們目前還沒有對應的本地化字符串届腐，所以需要在intl_en.arb文件中編寫：編寫后ctrl（command） + s保存即可
```
{
  "title": "home",
  "greet": "hello~",
  "picktime": "Pick a time"
}
```
  在代碼中使用即可铁坎，按照如下格式：S.of(context).title
3.3.4、添加中文
如果希望添加中文支持：add local犁苏，在彈出框中輸入zh即可硬萍，我們會發(fā)現(xiàn)，會生成對應的intl_zh.arb和messages_zh.dart文件
生成對應的`intl_zh.arb`和`messages_zh.dart`文件
- 編寫intl_zh.arb文件
```
{
    "title": "首頁",
    "greet": "您好~",
    "picktime": "選擇一個時間"
}
```
  查看界面围详，會根據(jù)當前語言顯示對應的語言文本
3.4. arb 其它語法
- 如果我們希望在使用本地化的過程中傳遞一些參數(shù)：
  - 比如hello kobe或hello james
  - 比如你好啊朴乖，周杰倫或你好啊
- 修改對應的arb文件：{name} 表示傳遞的參數(shù)
```
{
  "title": "home",
  "greet": "hello~",
  "picktime": "Pick a time",
  "sayHello": "hello {name}"
}
```
  在使用時祖屏，傳入對應的參數(shù)即可：
```
Text(S.of(context).sayHello("周杰倫")),
```
- 提示: arb 的好處, 每次我們只需要修改 intl_en.arb、intl_zh.arb等文件的 json數(shù)據(jù)买羞，它會自動幫我們生成對用名字的 get 方法袁勺，到時候直接 S.of(context).名字 調(diào)用即可

最后對應的 i18n代碼