持续创作,加速成长!这是我参与「掘金日新计划 · 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。其中
- generated/intl文件夹和generated/l10n.dart 此两个属于自动生成,勿手动修改。
- 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侧就实现了国际化功能。