Flutter 基于Intl插件实现app国际化

qq_20352713

已于 2022-06-21 10:33:17 修改

阅读量599

点赞数

于 2022-06-13 18:11:19 首次发布

本文链接：https://blog.csdn.net/qq_20352713/article/details/125259871

版权

flutter 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一. app支持国际化

1.下载插件

直接插件市场搜索`Flutter Intl`

Android Studio:Flutter Intl - IntelliJ IDEs Plugin | Marketplace

VS Code:Flutter Intl - Visual Studio Marketplace

添加依赖

dependencies:
  flutter_localizations:
    sdk: flutter

2.创建资源文件目录

首次使用,点击 Initialize for the Project .

插件会自动生成部分代码

添加/删除其它语系就点击初始化下面的 Add / Remove Locale 即可

3.引用配置

  MaterialApp(
...
    localizationsDelegates: const [
      GlobalCupertinoLocalizations.delegate, //Cupertino组件的翻译回调
      GlobalMaterialLocalizations.delegate, //Material组件的翻译回调
      GlobalWidgetsLocalizations.delegate, // 普通 Widget 的翻译回调
      S.delegate, // 应用程序的翻译回调
    ],
    supportedLocales: S.delegate.supportedLocales,
...
  );

在 MaterialApp 上配置 localizationsDelegates 跟 supportedLocales

4.编写国际化文件

编辑自动生成的.arb文件.插件也会自动更新文件的.

json格式,前面key,就是用来读取字段的键名称,value就是对应不同语言的文字

例如中文

英文

5.使用

把我们原本的文字,换成插件生成的字段即可

有BuildContext的使用 S.of(context).username

无 BuildContext的地方使用 S.current.username

6.总结

至此app已经能支持国际化了,但是还不完善.只能根据系统语言自动切换.

当然你也可以使用切换语言 S.load(Locale('de', 'DE')); 不过这里有时候会导致部分刷新

二.完善app内切换语言

这部分就是我们的自定义代码了.

切换语言主要是改变app的locale

 MaterialApp(
...
    locale: Locale('zh'),
...
  );

本文使用Provider 来实现locale的切换

1.创建一个数据源

class Config extends ChangeNotifier{
  ///当前使用的语系

  Locale? _locale;

  Locale? get locale => _locale;

  set locale(Locale? val) {

    _locale = val;
    notifyListeners();
    
    if (val != null) {
      _saveLocal(val);
    }
  }

  ///无默认支持语系时,所取的语言
  Locale? get defaultLocale => const Locale('en');

  ///本地化的代理类
  Iterable<LocalizationsDelegate<dynamic>>? get localizationsDelegates => const [
      GlobalCupertinoLocalizations.delegate, //Cupertino组件的翻译回调
      GlobalMaterialLocalizations.delegate, //Material组件的翻译回调
      GlobalWidgetsLocalizations.delegate, // 普通 Widget 的翻译回调
      S.delegate, // 应用程序的翻译回调
    ];

  ///支持语系
  Iterable<Locale> get supportedLocales => S.delegate.supportedLocales;


  ///首次进入时读取本地配置,app是否修改过语言  取上一次的语言
  Future<void> initLocale() async {
    var preferenceKey = const PreferenceKey('');
    var languageCode =
        await PreferenceStore(preferenceKey.localeLanguageCode)
            .getString();
    var countryCode =
        await PreferenceStore(preferenceKey.localeCountryCode)
            .getString();

    if (languageCode != null && languageCode != '') {
      //自动加载上一次保存的语系
      locale = Locale(languageCode, countryCode);
    }
    return;
  }

  ///持久化国际化信息
  Future<void> _saveLocal(Locale locale) async {
    var preferenceKey = const PreferenceKey('');
    PreferenceStore(preferenceKey.localeLanguageCode)
        .setString(locale.languageCode);
    PreferenceStore(preferenceKey.localeCountryCode)
        .setString(locale.countryCode ?? '');
    return;
  }

  ///App打开或者语言配置发生变化（在手机的设置里更改语言，app代码更改等）的时候会触发这个回调
  Locale? Function(Locale?, Iterable<Locale>)? get localeResolutionCallback =>
      (locale, locales) {
        Locale? res;
        String? supportLanguage;
        String? supportCountryCode;

        //判断系统当前第一个语系在不在app支持范围内
        for (var i = 0; i < locales.length; ++i) {
          var supportLocale = locales.elementAt(i);
          if (supportLocale.languageCode == locale?.languageCode) {
            supportLanguage = locale?.languageCode;
            if (supportLocale.countryCode == locale?.countryCode ||
                locale?.countryCode == '') {
              supportCountryCode = locale?.countryCode;
              break;
            }
          }
        }
        //无支持的语系
        if (supportLanguage == null) {
          res = defaultLocale;
        } else if (supportCountryCode == null) {
          //无完全支持的语系
          res = Locale(supportLanguage);
        } else {
          //完全支持
          res = locale;
        }
        _locale = res;
        return res;
      };
}

定义了一个Locale _locale.

全局使用,次对象可以在函数外声明,成为全局对象或写成单例

并且对比上一次.新增了3个方法

initLocale

这个方法首次进入的时候调用.用来判断之前是否手动改过.

若修改过这加载上一次的语系

_saveLocal

用来持久化语系,保存Locale的languageCode和countryCode.本文使用 shared_preferences 来做持久化

localeResolutionCallback

切换语系的回调.用户可能当前语言环境的语系不是我们支持的.我们可以通过这个方法返回一个默认的语系给用户

2.方法调用

2-1.app启动时获取上一次保存的语系

await appConfig.initLocale();

2-2.注册监听provider的值

创建Provider就不叙述了,直接到监听

Selector<Config, Locale?>(
   builder: (context, data, __) {
       return  MaterialApp(
...
      locale: data,
      localizationsDelegates = appConfig.localizationsDelegates
      supportedLocales = appConfig.supportedLocales
      localeResolutionCallback = appConfig.localeResolutionCallback
...
         );
   },
   selector: (context, _) => appConfig.locale,
);