Day18 - Flutter - 国际化

概述

• 国际化的认识
• 国际化的适配
• 国际化的工具

一、国际化的认识

开发一个App，如果我们的App需要面向不同的语种（比如中文、英文、繁体等），那么我们需要对齐进行国际化开发。
国际化的英文称呼：internationalization（简称为i18n，取前后两个字母，18表示中间省略字母的个数）
App国际化开发主要包括：文本国际化（包括文本的顺序），Widget显示的国际化：
比如我们下面开发的这个App
某些文本在英文环境下应该显示为英文；
某些Widget在中文环境下，应该显示中文（比如弹出的时间选择器）；

某些Widget在中文环境下，应该显示中文（比如弹出的时间选择器）

二、国际化的适配

• 2.1、Widget的国际化
  Flutter给我们提供的Widget默认情况下就是支持国际化，但是在没有进行特别的设置之前，它们无论在什么环境都是以英文的方式显示的。
  如果想要添加其他语言，你的应用必须指定额外的 MaterialApp 属性并且添加一个单独的 package，叫做 flutter_localizations。
  截至到 2020 年 2 月份，这个 package 已经支持大约 77 种语言。

  • 2.1.1、pubspec.ymal 添加依赖，想要使用 flutter_localizations 的话，我们需要在 pubspec.yaml 文件中添加它作为依赖如下，记得点击 Pub get 更新一下
    

    

    dependencies:
        flutter:
           sdk: flutter
        flutter_localizations:
           sdk: flutter
    

  • 2.1.2. 设置 MaterialApp

    • 在localizationsDelegates中指定哪些Widget需要进行国际化

      • 用于生产本地化值集合的工厂
      • 我们这里指定了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结果设置完成后，我们在Android上将语言切换为中文，查看结果，我们可以看到英文的 时间Widget里面的文字是 中文了

    

    • 但是对于iOS，将语言切换为中文，依然显示是英文的Widget

      • 这是因为iOS定义了一些应用的元数据，其中包括支持的语言环境；
      • 我们必须将其对应的元数据中支持的语言添加进去；
      • 元数据的设置在iOS项目中对应的info.plist文件中；

    • 修改 iOS 的 info.plist 文件配置：

      1、Xcode打开工程
      2、添加语言的选项Localizations
      3、选择Localizations
      4、添加中文简体
      配置完成后，卸载之前的app，重新安装：我们可以看到和安卓模拟器一样的效果
      

• 2.2、其它文本国际化
  App中除了有默认的Widget，我们也希望对自己的文本进行国际化

  • 2.2.1、创建本地化类，该类用于定义我们需要进行本地化的字符串等信息：

    • 1.我们需要一个构造器，并且传入一个Locale对象（后续会使用到）

    • 2.定义一个Map，其中存放我们不同语言对应的显示文本

    • 3.定义它们对应的getter方法，根据语言环境返回不同的结果

      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发生改变时，调用对应的load方法，重新加载新的Locale资源；
    • JKLocalizationsDelegate需要继承自LocalizationsDelegate，并且有三个方法必须重写：
      • isSupported：用于当前环境的Locale，是否在我们支持的语言范围
      • shouldReload：当Localizations Widget重新build时，是否调用load方法重新加载Locale资源
        • 一般情况下，Locale资源只应该在Locale切换时加载一次，不需要每次Localizations重新build时都加载一遍；
        • 所以一般情况下返回false即可；
      • load方法：当Locale发生改变时（语言环境），加载对应的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对象，本质上是在调用 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. 异步加载数据，也就是 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.转成map类型
         final Map<String, dynamic> map = json.decode(jsonString);
    
         // 3.注意：这里是将Map<String, dynamic>转成Map<String, Map<String, String>>类型
         _localizedValues = map.map((key, value) {
             return MapEntry(key, value.cast<String, String>());
         });
         return true;
    }
    

    提示：这里我们也可以改为网络请求，拿到数据后一样转换类型

    在 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文件
  目前我们已经可以通过加载对应的json文件来进行本地化了
  但是还有另外一个问题，我们在进行国际化的过程中，下面的代码依然需要根据 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代码文件直接来转换呢？答案就是arb文件
    • arb文件全称Application Resource Bundle，表示应用资源包，目前已经得到Google的支持；
    • 其本质就是一个 json 文件，但是可以根据该文件转成对应的语言环境；
    • arb 的说明文档：https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification

• 3.2、intl package
  官方文档推荐可以使用intl package来进行arb和dart文件之间的转换（通过终端指令）

  • https://flutter.dev/docs/development/accessibility-and-localization/internationalization#appendix-using-the-dart-intl-tools

  需要在在 pubspec.yaml 中添加其相关的依赖，具体步骤这里不再详细给出，可以参考官方文档

• 3.3、使用IDE插件

  • 在之前有一个比较好用的Android Studio的插件：Flutter i18n
    • 但是这个插件已经很久不再维护了，所以不再推荐给大家使用
  • 目前我们可以使用另外一个插件：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即可，我们会发现，会生成对应的intl_zh.arb和messages_zh.dart文件

  
  
  生成对应的`intl_zh.arb`和`messages_zh.dart`文件

  • 编写intl_zh.arb文件

    {
        "title": "首页",
        "greet": "您好~",
        "picktime": "选择一个时间"
    }
    

    查看界面，会根据当前语言显示对应的语言文本

• 3.4. arb 其它语法

  • 如果我们希望在使用本地化的过程中传递一些参数：

    • 比如hello kobe或hello james
    • 比如你好啊，周杰伦 或 你好啊

  • 修改对应的arb文件：{name} 表示传递的参数

    {
      "title": "home",
      "greet": "hello~",
      "picktime": "Pick a time",
      "sayHello": "hello {name}"
    }
    

    在使用时，传入对应的参数即可：

    Text(S.of(context).sayHello("周杰伦")),
    

  • 提示: arb 的好处, 每次我们只需要修改 intl_en.arb、intl_zh.arb等文件的 json数据，它会自动帮我们生成对用名字的 get 方法，到时候直接 S.of(context).名字 调用即可

最后对应的 i18n代码