在说flutter国际化前，不得不提到，在uni-app中支持的Vue-i18n，两者有相似之处，也有差异的地方。
本篇借鉴了三篇热门帖子
Flutter中的国际化：如何写一个多语言的App
Flutter国际化完整例子
Internationalization - Make an Flutter application multi-lingual
只记录根据手机系统语言自动转换app语言
1.引入依赖
引入后，保存会自动加入安装此依赖
//pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations: #多语言
sdk: flutter
//这里是Http网络请求需要加入的
dio: ^2.1.13 #Http 请求Dio
http: ^0.12.0 #http
json_serializable: ^3.1.0 #json 序列化
json_annotation: ^2.4.0 #json 注释
2.创建翻译json文件和添加配置
我们新建一个和"/lib"同级别的文件夹"/locale"，然后在这个文件夹中新建两个文件，分别为"i18n_en.json" 和" i18n_zh.json"。再在"/lib"文件夹下创建和"main.dart"同级的"translation.dart"和"application.dart"。
文件夹树现在是这个样子的：
MyApplication
|
+- android
+- build
+- images
+- ios
+- lib
|
+-main.dart
+-translation.dart
+-application.dart
+- locale
|
+- i18n_en.json
+- i18n_zh.json
+- test
//i18n_zh.json or i18n_en.json
{ "hello" : "你好！" , "hello" : "Hello~" }
在pubspec.yaml继续加入json，引入静态资源
assets:
- locale/i18n_zh.json
- locale/i18n_en.json
//图片也是需要手动加入到assets中的
- images/lake.jpg
- images/number.png
3.main.dart中加入配置
//导入flutter的包
import 'package:flutter_localizations/flutter_localizations.dart';
import 'translation.dart';
import 'application.dart';
void main(){
debugPaintSizeEnabled = !true;
runApp(MyApp());
}
/// 将App设置为Stateful，这让它可以响应刷新事件，调用应用的SetState()
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
SpecificLocalizationDelegate _localeOverrideDelegate;
@override
void initState(){
super.initState();
/// 初始化一个新的Localization Delegate，有了它，当用户选择一种新的工作语言时，可以强制初始化一个新的Translations
_localeOverrideDelegate = new SpecificLocalizationDelegate(null);
/// 保存这个方法的指针，当用户改变语言时，我们可以调用applic.onLocaleChanged(new Locale('en',''));，通过SetState()我们可以强制App整个刷新
applic.onLocaleChanged = onLocaleChange;
}
/// 改变语言时的应用刷新核心，每次选择一种新的语言时，都会创造一个新的SpecificLocalizationDelegate实例，强制Translations类刷新。
onLocaleChange(Locale locale){
setState((){
_localeOverrideDelegate = new SpecificLocalizationDelegate(locale);
});
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
_localeOverrideDelegate, // 注册一个新的delegate
const TranslationsDelegate(), // 指向默认的处理翻译逻辑的库
// 本地化的代理类
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: applic.supportedLocales(),
title: 'Flutter Router',
debugShowCheckedModeBanner: false, //关掉模拟器右上角debug图标
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: Homes(),
//路由表设置
routes: <String, WidgetBuilder>{
'/Second':(BuildContext context) => new SecondPage(),
'/Http':(BuildContext context) => new HttpPage(),
},
);
}
}
......
//Homes()省略了
4.给translation.dart和application.dart添加内容
//application.dart
import 'package:flutter/material.dart';
typedef void LocaleChangeCallback(Locale locale);
class APPLIC {
// List of supported languages
final List<String> supportedLanguages = ['en','zh'];
// Returns the list of supported Locales
Iterable<Locale> supportedLocales() => supportedLanguages.map<Locale>((lang) => new Locale(lang, ''));
// Function to be invoked when changing the working language
LocaleChangeCallback onLocaleChanged;
///
/// Internals
///
static final APPLIC _applic = new APPLIC._internal();
factory APPLIC(){
return _applic;
}
APPLIC._internal();
}
APPLIC applic = new APPLIC();
//translation.dart
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'application.dart';
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) {
try {
String value = _localizedValues[key];
if(value == null || value.isEmpty) {
return englishText(key);
} else {
return value;
}
} catch (e) {
return englishText(key);
}
}
String englishText(String key) {
return _localizedValues[key] ?? '** $key not found';
}
static Future<Translations> load(Locale locale) async {
Translations translations = new Translations(locale);
String jsonContent = await rootBundle.loadString("locale/i18n_${locale.languageCode}.json");
_localizedValues = json.decode(jsonContent);
return translations;
}
get currentLanguage => locale.languageCode;
}
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) => true;
}
5.获取翻译
......
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("JSON"),
),
body:Center(
child: Column(
children: <Widget>[
Text(Translations.of(context).text('hello')) //这里
],
)
),......
补充：如果需要强制转换的话(小编自己没有用到)
//为了强制切换另一种工作语言，只需要一行代码，可以在App的任何地方调用：
applic.onLocaleChanged(new Locale('fr',''));
网友评论