【flutter】国际化配置

在app文字语种 上，公司App主要针对国外用户，但同时还得兼顾国内的用户。

对于flutter来说，主要有两种实现方式，但是基本思想是一样的：都是根据App运行环境的语种，加载（我使用的本地加载）不同的静态资源，再进行渲染。

第一种方式利用 shared_preferences

主要记录第一种持久化存储的方案，因为后期的开发中还会使用到 sqlite

配置：

flutter已经提供国际化多语言，我们只需要配置好，然后使用就可以了。

1，准备两个语言版本的 json 文件：

// xlfd_zh.json
{
    "title": "我是小李飞刀"
}

// xlfd_en.json
{
    "title": "i am xlfd"
}

在pubspec.yaml配置assets:

flutter:

  uses-material-design: true

  assets:
    - lang/xlfd_en.json
    - lang/xlfd_zh.json

2，引入依赖 --- pubspec.yaml

flutter_localizations：flutter内置实现本地化的库；

shared_preferences：flutter插件，对android（SharedPreferences）和ios（NSUserDefaults）的存储进行了封装，可实现键值对存取；

  flutter_localizations:
    sdk: flutter
  shared_preferences: ^0.5.3+4

ps：记得运行 flutter pub get

关键的两点是：如何拿到json文件的内容，并且根据系统语言加载对应的jason内容；如何监测系统语言的变化（用户在设置里切换语言），并且知道当前系统是何种语言；

3，监测系统语言的变化；获取当前系统是何种语言

根级 Widget MaterialApp 中有一个配置项 localeResolutionCallback，值是一个回调，在App打开或者语言配置发生变化（在手机的设置里更改语言，app代码更改等）的时候会触发这个回调，入参两个参数 deviceLocale supportedLocales；前者会入参一个携带语言信息的Locale值，后者包含我们后面即将设置的语言支持种类

然后新建一个trahslations.dart文件：

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show  rootBundle;
import 'package:shared_preferences/shared_preferences.dart';
/// 自定义的Translations类
class Translations {
	Translations(Locale locale) {
		this.locale = locale;
		_localizedValues = null;
	}

	Locale locale;
	static Map<dynamic, dynamic> _localizedValues;

	static Translations of(BuildContext context){
		return Localizations.of<Translations>(context, Translations);
	}

	String text(String key) {
		if(_localizedValues==null) {
			return "json文件无内容或获取内容失败";
		}
		return _localizedValues[key] ?? '**找不到 $key 对应的值**';
	}

	static Future<Translations> load(Locale locale) async {
		SharedPreferences sp = await SharedPreferences.getInstance();
        // 取出存储中的语种"lang"
		String lang =  sp.get("lang") == null ? "zh" : sp.get("lang");
		print('配置中存储的语言:$lang');
		Translations translations = new Translations(locale);
        // 读取json，格式化---此处注意层级关系
		String jsonContent = await rootBundle.loadString("lang/xlfd_$lang.json");
		_localizedValues = json.decode(jsonContent);
		applic.shouldReload = false;
		return translations;
	}

	get currentLanguage => locale.languageCode;
}

/// 自定义的localization代表，它的作用是在验证支持的语言前，初始化我们的自定义Translations类
class TranslationsDelegate extends LocalizationsDelegate<Translations> {
	const TranslationsDelegate();

	/// 改这里是为了不硬编码支持的语言
	@override
	bool isSupported(Locale locale) => applic.supportedLanguages.contains(locale.languageCode);

	@override
	Future<Translations> load(Locale locale)=> Translations.load(locale);

	@override
	bool shouldReload(TranslationsDelegate old) => false;
}

/// Delegate类的实现，每次选择一种新的语言时，强制初始化一个新的Translations类
class SpecificLocalizationDelegate extends LocalizationsDelegate<Translations> {
	final Locale overriddenLocale;

	const SpecificLocalizationDelegate(this.overriddenLocale);

	@override
	bool isSupported(Locale locale) => overriddenLocale != null;

	@override
	Future<Translations> load(Locale locale) => Translations.load(overriddenLocale);

	@override
	bool shouldReload(LocalizationsDelegate<Translations> old) {

		return applic.shouldReload??false;
	}
}

typedef void LocaleChangeCallback(Locale locale);

class APPLIC {
	// 支持的语言列表
	final List<String> supportedLanguages = ['en','zh'];

	// 支持的Locales列表
	Iterable<Locale> supportedLocales() => supportedLanguages.map<Locale>((lang) => new Locale(lang, ''));

	// 当语言改变时调用的方法
	LocaleChangeCallback onLocaleChanged;

	bool shouldReload;

	static final APPLIC _applic = new APPLIC._internal();

	factory APPLIC(){
		return _applic;
	}

	APPLIC._internal();
}

APPLIC applic = new APPLIC();

准备工作基本完毕，现在进行配置：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// 国际化依赖
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'lang/trahslations.dart';
/// 国际化依赖

import 'pages/Routes.dart';
import 'pages/quotePages.dart';

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SpecificLocalizationDelegate _localeOverrideDelegate;

  onLocaleChange(Locale locale) async {
    print('onLocaleChange--触发');
    // 实例化SharedPreferences以供存储
    SharedPreferences sp = await SharedPreferences.getInstance();
    // 更新语言配置 --- key为"lang",value为locale.languageCode
    await sp.setString("lang", locale.languageCode);
    // 根据语言更新_localeOverrideDelegate，以供给localizationsDelegates
    setState(() {
      _localeOverrideDelegate = new SpecificLocalizationDelegate(locale);
    });
  }

  @override
  void initState() {
    super.initState();
    _localeOverrideDelegate = new SpecificLocalizationDelegate(null);
    applic.onLocaleChanged = onLocaleChange;
  }

  // App 根级 widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          home: Sign_inPage(), // App 首页
          routes: routesMap(), // routes注册
          initialRoute: 'sign_in', // 在注册了routes的前提下，指定一个route作为首页 --- 级别高于 home
          // 国际化配置
          localizationsDelegates: [
            _localeOverrideDelegate,
            const TranslationsDelegate(),
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: applic.supportedLocales(), // 支持的语种
          localeResolutionCallback: (deviceLocale, supportedLocales) {
            String langStr = deviceLocale.toString();
            bool isCN = false;
            if (langStr.isNotEmpty) {isCN = deviceLocale.toString().toLowerCase().indexOf('zh', 0) > -1;}
            String langCode = 'en';
            if (isCN) {langCode = 'zh';}
            applic.shouldReload = true;
            applic.onLocaleChanged(new Locale(langCode,''));
            return;
          }
    );
  }
}

4，读取 json 文件，并且根据系统语言（第3步提供）加载对应的 json 文件

在第三步中的trahslations.dart文件内：

根据lang动态加载不同的json文件；

 

使用

String _lang(String key) {
    return Translations.of(context).text(key);
}

_lang('title');

主动变更语言：

添加新的语言

首先在 trahslations.dart 文件中的 APPLIC 类里的 supportedLanguages 添加上要增加的语言code：

然后添加json文件：

// xlfd_xlfd.json
{
    "title": "俺是小李飞刀"
}

flutter:

  uses-material-design: true

  assets:
    - lang/xlfd_en.json
    - lang/xlfd_zh.json
    - lang/xlfd_xlfd.json

测试：

效果：

参考链接：Flutter~国际化教程方案 | 少停

第二种方式基于 intl package   参考链接:

Flutter 应用里的国际化 - Flutter 中文文档 - Flutter 社区中文资源

intl_国际化源码