FlutterComponent最佳实践之国际化

点击上方蓝字关注我，知识会给你力量

在Android中，我们可以通过不同的strings.xml文件来实现国际化的不同语言需求，那么在Flutter中，官方同样也提供了国际化的适配方案，官方文档如下所示。
https://docs.flutter.dev/development/accessibility-and-localization/internationalization

本地化与国际化

本地化（Localization）指的是：使程序支持显示数字、货币、日期和复数的本地格式，因为对于另一个地区来说，这些可能是不同的展示样式。

国际化（Internationalization）指的是：使应用程序在特定的地区表现不同的语言展示。国际化包括创建多个基于本地的语言文件、assets等等。

flutter_localizations的使用

当然，官方的方案是比较传统的方案，社区里有很多工具，可以极大的简化国际化的处理流程，让我们可以很快的进行国际化适配，这里使用到的就是一个名为「Flutter Intl」的插件。

安装好这个插件后，我们在yaml中增加国际化的依赖：

flutter_localizations:
    sdk: flutter

执行pub get之后，在Tools -> Flutter Intl -> Initialize for the Project中对项目进行初始化。我们选择add local后，可以继续添加不同类型的语言文件。

初始化完成后，yaml里会自动增加下面的内容。

flutter_intl:
  enabled: true

这样处理完之后，插件就会自动帮我们生成相应的国际化所需要的文件。

我们要做的，就是在arb文件中，添加相应的对应字符串即可。

intl_zh.arb
{
  "my_task": "我的任务",
  "today": "今日"
}

intl_en.arb
{
  "my_task": "My Task",
  "today": "Today"
}

我们所有需要用到文字，都会通过Json的方式在这里添加，插件会自动帮我们同步到messages_xx文件中。

那么这些国家地区的Code怎么写呢？我们可以借助Android Studio。在资源目录下，创建Local类型的资源文件，然后在这里就可以看到所有的Language Code和Regina Code了。

有了这些code，就可以组成国际化的arb文件了，例如zh_CN，zh_HK，zh_TW这样的。

❝

有个地方需要注意，那就是如果设置了Regina Code，例如zh_CN，那么所有的zh相关的文件，就必须包含Regina Code，否则会导致切换异常。

❞

接下来，我们需要在项目中配置国际化的适配，在MaterialApp中配置下面的代码即可。

return MaterialApp(
  localizationsDelegates: const [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  ……
);

这些东西，都是插件生成的，它们的含义如下。

• localizationsDelegates：国际化的代理工厂类

• S.delegate：插件生成的国际化委托类，它会根据你的arb文件自动生成对应的方法调用

• GlobalMaterialLocalizations.delegate：为Material Components提供了国际化字符串处理

• GlobalCupertinoLocalizations.delegate：为Cupertino Components提供了国际化字符串处理

• GlobalWidgetsLocalizations.delegate：为Widget提供默认的国际化处理，例如文字方向等

我们在使用时，只需要将原本的字符串使用，改成通过S.of(context)来调用即可，例如下面的代码。

Text('today')
替换为
Text(S.of(context).today)

同时，arb文件还支持使用占位符，通过{}来引用一个变量，如下所示。

"x_of_x_completed": "{todoCount} of {totalCount} completed"
使用时
S.of(context).x_of_x_completed(todoCount, totalCount)

上面这些配置好后，当App启动时，就会根据手机当前的语言状态来切换不同的语言文件了。

使用拓展函数简化。

extension LocalizedBuildContext on BuildContext {
  S get loc => S.of(this);
}

context.loc.my_task

在需要主动切换语言的地方，可以通过下面的代码来快速切换全局的语言。

S.load(Locale('zh', 'CN');

AppName国际化

对于Android项目来说，做国际化依然是通过value文件夹的国家Code限定符来处理。

在values目录下创建strings.xml文件，这里是默认的语言，我们可以将中文放在这里，再创建一个values-en文件夹，这里处理的是英文，我们创建一个strings.xml，将英文翻译放在这里即可。

这样我们使用不同的系统语言时，就会展示不同的AppName了。

一些第三方的国际化工具

除了官方的这个方案以外，Easy Localization也是用的比较多的一个社区方案。
https://pub.dev/packages/easy_localization
这篇文章对国际化的讲解也非常详细。
https://www.kodeco.com/10794904-internationalizing-and-localizing-your-flutter-app

向大家推荐下我的网站 https://www.yuque.com/xuyisheng  点击原文一键直达

专注 Android-Kotlin-Flutter 欢迎大家访问

往期推荐

• 从源码看Flutter BuildContext的秘密

• FlutterComponent最佳实践之Widget尺寸

• FlutterComponent最佳实践之Timer的妙用

• Flutter布局指南之约束和尺寸
  

本文原创公众号：群英传，授权转载请联系微信(Tomcat_xu)，授权后，请在原创发表24小时后转载。

< END >

作者：徐宜生

更文不易，点个“三连”支持一下👇