likes
comments
collection
share

Flutter 应用国际化方案探索

作者站长头像
站长
· 阅读数 5

网络上关于 Flutter 的国际化很繁杂,大多数方案与 Android 和 iOS 原生国际化方相比相当繁复,不易施行。最近公司项目开发中尝试引入 Flutter 进行混编,小编也抽出时间对一些技术点做了探索。这篇文章是针对 Flutter 国际化探索中尝试过的几种方案中,个人认为最方便的一种,在这里做一些分享。

Flutter 国际化少不了flutter_localizations依赖库,具体集成方法不做赘述。小编使用 Intl进行国际化处理,也是官方推荐的国际化插件。小编使用 Android Studio 进行的开发,其他 IDE 有兴趣者可以尝试一下。

在 Android Studio 中添加 Intl Plugin: Android Studio -> Preferences -> Plugins -> MarketPlace 中搜索 Flutter Intl

Flutter 应用国际化方案探索

安装完成之后重启 Android Studio, 使 Plugin 生效,然后执行 Intialize for the project

Flutter 应用国际化方案探索

完成之后会在 pubspec.yaml 中增加以下字段

flutter_intl:
  enabled: true

IDE 会帮我们生成以下文件

Flutter 应用国际化方案探索

generated -> intl 下默认存在一个messages_all.dartmessages_en.dart文件,messages开头的文件会在添加语言(.arb 文件)后自动生成。

l10n 下存在一个intl_en.arb文件,这是多语言资源文件,我们可以根据需要添加支持其他语言的文件,比如 intl_zh.arb,每次添加或删除一个.arb文件都会自动在 generated -> intl 下增加或去除一个与之相对应的.dart文件。

之后我们可以在.arb 文件中添加需要进行国际化的字符串,比如

{
  "name": "Tom",
  "age": "10"
}

每次添加或删除都会在l10n.dart文件中自动为我们生成或去除相应的 get 方法,这里的 get 方法是我们外部获取国际化字符串的通道。

 /// `Tom`
  String get name {
    return Intl.message(
      'Tom',
      name: 'name',
      desc: '',
      args: [],
    );
  }

  /// `10`
  String get age {
    return Intl.message(
      '10',
      name: 'age',
      desc: '',
      args: [],
    );
  }

在使用国际化时,需要在main.dart中的MaterialApp中做相应的配置

    // 设置 locale
    locale: locale,
    //设置 delegate
    localizationsDelegates: [
    // Intl 帮我们生成的国际化 delegate
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
    //设置支持的语言,每添加一种语言,都会自动帮我们添加到supportedLocales中去
    supportedLocales: S.delegate.supportedLocales,

相应字符串的展示S.of(context).name

相比官方方案,该方案除了在资源文件中添加需要进行国际化的字符串之外,其他都不需要我们操心,与原生中的国际化方案很接近。

转载自:https://juejin.cn/post/7010943948055117861
评论
请登录