Flutter适配国际化

Flutter、Golang、Python、编译原理、算法、Chrome原理学习系列文章抢先看请关注【码农帮派】：

 

在Flutter中，为了实现文本的国际化，我们需要完成三步：

• 首先，实现一个LocalizationsDelegate（翻译代理），将所有需要翻译的文案声明为它的属性；

• 然后，为所有需要支持语言的地区进行手动的文案翻译；

• 最后，在应用的MaterialApp初始化的时候，将这个翻译代理类设置为应用程序的翻译代理。

 

经过上面的处理，应用程序就会在系统不同的语言设置下自动获取不同的地区语言文案了。

 

为了减少编程的工作量，下面使用Android Studio提供的一个插件：Flutter i18n。这个插件为我们提供了不同地区语言的配置封装，可以帮助我们自动的生成翻译之后的Dart代码。

 

在使用之前需要保证我们的Android Studio安装了flutter i18n插件（安装方法见本公众号的另外一篇文章：Android Studio安装插件-Flutter i18n）：

flutter i18n插件依赖flutter_localizations包，需要在pubspec.yaml文件中添加依赖：

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

完成上面的修改之后，我们会发现项目目录下多了两个文件：

strings_en.arb文件是系统默认的英文资源配置，arb文件是JSON格式的配置文件，用来存放文案标识符和文案翻译的键值对。我们只需要修改res/values下的arb文件，i18n插件就会帮我们生成对应的代码。

 

为了让i18n可以支持中文，需要添加strings_zh.arb文件，尝试修改strings_zh.arb文件的内容，flutter i18n插件会帮我们在generated/i18n.dart文件中生成对应的资源翻译代码：

对应的string_zh.arb文件如下：

i18n.dart中对应的中文资源类$zh，这个类以资源标识符属性的方式为我们提供了静态文案翻译映射，message_tips这种包含参数的文案也生成了对应的内联函数。

 

Flutter适配国际化，需要在应用的入口MaterialApp初始化的时候，为其提供支持国际化的配置：

上面的代码中，为了让Flutter支持国际化需要传入两个参数localizationsDelegates和supportedLocales。前者是应用的翻译代理，后者声明应用支持的所有语言地区。

 

S.delegate是Flutter i18n插件生成的类，提供了所支持的语言地区属性以及文案在不同地区的翻译映射。除了S.delegate，我们还使用了另外两个代理：GlobalMaterialLocalizations.delegate和GlobalWidgetsLocalizations.delegate，这两个是Flutter的Widget本身的国际化代理，我们无需对Flutter Widget自带的文案进行翻译，于是需要通过这两个自带的代理完成。

 

需要注意的是，S.delegate代理只能在能够获取到上下文的前提下，才能够使用，也就是针对MaterialApp的子Widget生效。MaterialApp的title无法通过这种方式设置，可以通过MaterialApp的onGenerateTitle来使用S.delegate代理（如上面的代码）。

 

iOS应用有一套自建的语言环境管理机制，默认是英文。为了让iOS应用能够正确的支持国际化，我们需要在iOS工程做一些额外的配置。否则当我们调整iOS设备的语言环境之后，Flutter应用的国家化语言还是英语。

完成上面的配置，重新运行Flutter应用，就会发现应用正确的使用了中文文案。

 

原生工程配置

上面国际化的方案只能保证Flutter应用内的国际化。我们知道Flutter应用是运行在Native宿主App中的，在Flutter运行之前，我们是无法干涉宿主App的国际化信息的。要是我们需要修改Flutter运行之前的文案，比如App的名称，我们就需要在宿主App中进行配置了。

 

Android工程的应用名称配置

首先我们需要打开android/app/src/main/AndroidManifest.xml文件，修改application的android:label属性，让它的值引用资源配置文件中的配置:

<manifest ... >    ...     <!-- 设置应用名称 -->    <application        ...        android:label="@string/title"        ...    >    </application></manifest>

然后在android/app/src/main/res中添加支持国际化配置的资源文件strings.xml。

经过上面的配置，在Android端就可以看到应用名称已经适配了国际化需求。

 

iOS工程的应用名称配置

我们现在iOS工程的Runner文件夹中新建InfoPlist.strings文件，并在工程面板右侧的Localization配置选项中添加英文和中文支持。

在两个InfoPlist.string文件中分别添加：

// InfoPlist.string（English）
"CFBundleName" = "Flutter Study"

// InfoPlist.strings（Chinese（Simplified））
"CFBundleName" = "Flutter学习"

完成上面的配置，就完成了iOS端应用名称的国际化配置。