FunFlutter系列之国际化Intl方案

8,373 阅读2分钟

为什么采用Intl方案

随着flutter_i18n组件的作者不再维护,IDE中的插件已被作者从插件市场中下架.原先使用该方案的FunAndroid项目采用了新的Flutter Intl方案

该方案没有flutter_i18n方案成熟,在开发中,IDE的插件也还没有开源.在使用中还需要开发者跟随项目做一些适配,比如下边会提到的对简繁体supportedLocales的一些特殊处理

配置Flutter Intl

1.安装插件

确保Android Studio 或 VScode安装有Flutter Intl插件

目前AS安装Flutter插件会自动捆绑安装该插件

安装插件

2.初始化项目

  1. pubspec.yaml中添加flutter_localizations依赖并执行packages get

    # 国际化
    flutter_localizations:
        sdk: flutter
    

  2. 在菜单中找到Tools,选择Flutter Intl,点击Init for the project

  3. init结束后,pubspec.yaml中会自动增加以下字段

    flutter_intl:
        enabled: true
    
  4. lib目录下会新增generatedl10n两个目录.

    • l10n目录下为arb文件
    • generated目录下为根据arb文件自动生成以下dart代码
  5. 新增语言(比如中文)

    • 通过插件添加arb文件
    • 填入local code 如zh,en,生成arb文件

      如果存在地区,类似汉语下有大陆的简体zh_CN,港台的繁体zh_HKzh_TW

    • lib/generated/intl/目录下会生成新的messages_xx.dart
  6. MaterialApp中配置supportedLocaleslocalizationsDelegates

    • localizationsDelegates,加入由Intl插件生成的S.delegate和SDK组件库的delegate
    • supportedLocales需要手动将en设置为第一项,保证无适配对应locale时,en为默认选项.(此处处理并不优雅)
    • 目前插件在简繁体不完善需要做部分适配
      • localeResolutionCallback回调中手动处理简繁体

以下为示例

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      // 讲en设置为第一项,没有适配语言时,英语为首选项
      supportedLocales: [const Locale('en', ''), ...S.delegate.supportedLocales],
      // 插件目前不完善手动处理简繁体
      localeResolutionCallback: (locale, supportLocales) {
        // 中文 简繁体处理
        if (locale?.languageCode == 'zh') {
          if (locale?.scriptCode == 'Hant') {
            return const Locale('zh', 'HK'); //繁体
          } else {
            return const Locale('zh', 'CN'); //简体
          }
        }
        return null;
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
  1. iOS需要在xcode中添加Localizations

使用Flutter Intl

  1. 普通使用

    {"content": "内容"}
    S.of(context).content
    
  2. 占位

    {"welcome": "welcome {name}"}
    S.of(context).welcome("phoenixsky")
    
  3. 重复占位

    {"goodStudy": "{good}{good}学习,{day}{day}向上"}
    S.of(context).goodStudy("好", "天")
    

  4. 复数形式

    {"getMessageTips": "{howMany, plural, zero{You have no message} one{You have 1 message} other{You have {howMany} messages}}"}
    S.of(context).getMessageTips(2)
    

  5. 更多使用方式见intl | Dart Package

相关项目

玩Android客户端Flutter版

感谢

localizely/flutter-intl-plugin-sample-app

intl | Dart Package