Flutter 国际化

721 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

什么是国际化

国际化是指在设计软件时,将软件与特定语言及地区脱钩的过程。当软件被投放到不同的语言地区时,软件本身不用做内部工程上的改变或修正。

为什么要做国际化

随着国内出海业务的增多,开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们就必须要对各个地区进行国际化适配。即使大家所做的项目不需要出海,也应当将APP内语言实现可配置化,而不是以硬编码形式存在与各个页面,为以后扩展留下基础。具体实现步骤如下:

1. 安装Flutter Intl插件与初始化

AndroidStuido与VScode略有不同,具体如下:

Android Stuido:

a. 在plugins中搜索intl,安装完成后需重启IDE生效。

b. 点击Tools -> Flutter Intl -> Initialze for the Project

VSCode

a. 在VSC插件中安装Flutter Intl

b. 打开Flutter项目

c. Command + Shift + P 打开command palette,搜索 Flutter Intl: Initialize

初始化完成

此时会在 lib目录下生成 l10n 目录以及 l10n.dart & intl。其中

  1. generated/intl文件夹和generated/l10n.dart 此两个属于自动生成,勿手动修改。
  2. l10n文件夹 用于存放需要的国际化语言

2. 在pubspec.yaml中添加flutter_localizations依赖



dependencies:

  flutter_localizations:

    sdk: flutter

3. 在MaterialApp设置localizationsDelegate相关代码,具体如下:



return MaterialApp(

  localizationsDelegates: [

    S.delegate, //intl的delegate

    GlobalMaterialLocalizations.delegate, //Material组件 delegate

    GlobalWidgetsLocalizations.delegate, //Widget组件 delegate

    GlobalCupertinoLocalizations.delegate, //Cupertino组件 delegate

    PickerLocalizationsDelegate.delegate //一些第三方组件 delegate

 ],

  supportedLocales: S.delegate.supportedLocales, //app所支持的语言集合

  locale: localeModel.locale, //当前的语言 example: Locale('zh', '')

  

)

4. 添加所需语言

点击Tools -> Flutter Intl -> Add locale,选择对应语言,例如zh,en。如果有繁体支持,港台分别为zh_TW/zh_HK。选定后,会在l10n文件夹下自动创建对应文件,例如 intl_en.arb/intl_zh.arb。 这些文件就是我们用来编辑的,也可直接在i10n文件夹下手动添加arb文件,命名格式需要统一。arb文件用来存放语言包,其结构与json文件类似,以key-value形式存在。如下所示:



{

  "appName": "项目名称",

  "test": "测试",

  "cancel": "取消",

  "confirm": "确认"

}

每次添加完语言后,generated文件下国际化代码模板会自动生成。

5. 使用

在模板代码自动生成后,既可在需要使用国际化地方调用S.of(context).key, 若没有context,也可使用S.current.key。此时获取到语言,就对应我们在materialApp设置locale。通过动态改变locale,Flutter侧就实现了国际化功能。