flutter 国际化(语言地区本地化)使用flutter_i18n 使用intl包 Localizations widget
Flutter国际化的一些用法,包括Localization widget,intl包和flutter_i18n包的用法
在默认情况下,Flutter只支持英文,要添加多国语言支持,需要在pubspec.yaml文件中添加依赖
1.使用flutter_i18n(插件安装参考:https://www.cnblogs.com/gaozhang12345/p/12082436.html)
主要是利用json文件来进行翻译,个人认为最简单的一种,可以自己定app语言,方便刷新切换语言,不依赖系统语言
在pubspec.yaml文件中添加依赖
dependencies: flutter: sdk: flutter flutter_i18n: ^0.8.2 flutter: assets: - flutter_i18n/
如图:
新建json文件(assrts下新建的文件夹i18n,在新建文件命名为”en,json“,新建命名为”zh.json“,手动建不会自动生成的)
命名规则可以这样{languageCode}_{countryCode}.json(语言类型_国家.json)或者{languageCode}.json(语言.json),这里我命名为zh.json,内容如下:
{
"title": "测试应用",
"label": {
"main": "哈罗!老子"
},
"button": {
"clickMe": "点击这里"
},
"toastMessage": "您点击了按钮!",
"clicked": {
"times-0": "您点击ll了{times}次!",
"times-1": "您点击kk了{time}次!",
"times-2": "您点击hh了{times}次!"
}
}
en.json内容如下:
{
"title": "Test app",
"label": {
"main": "Hello {user}!"
},
"button": {
"clickMe": "Click here"
},
"toastMessage": "You clicked on button!",
"clicked": {
"times-0": "You clicked ll{times} times!",
"times-1": "You clicked kk{time} time!",
"times-2": "You clicked hh{times} times!"
}
}
mart.dart内容如下:
import 'package:flutter/material.dart'; import 'package:flutter_i18n/flutter_i18n.dart'; import 'package:flutter_i18n/flutter_i18n_delegate.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(), localizationsDelegates: [ FlutterI18nDelegate( useCountryCode: false, fallbackFile: 'en', path: 'assets/i18n'), GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate ], ); } } class MyHomePage extends StatefulWidget { @override MyHomeState createState() => new MyHomeState(); } class MyHomeState extends State<MyHomePage> { Locale currentLang; int clicked = 0; @override void initState() { super.initState(); new Future.delayed(Duration.zero, () async { await FlutterI18n.refresh(context, new Locale('es')); setState(() { currentLang = FlutterI18n.currentLocale(context); }); }); } changeLanguage() { setState(() { currentLang = currentLang.languageCode == 'en' ? new Locale('en') : new Locale('zh'); }); } incrementCounter() { setState(() { clicked++; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text(FlutterI18n.translate(context, "title"))), body: new Builder(builder: (BuildContext context) { return new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text(FlutterI18n.translate(context, "label.main", Map.fromIterables(["user"], ["Flutter lover"]))), new Text(FlutterI18n.plural(context, "clicked.times", clicked)), new FlatButton( onPressed: () async { incrementCounter(); }, child: new Text( FlutterI18n.translate(context, "button.clickMe"))), new FlatButton( onPressed: () async { changeLanguage(); await FlutterI18n.refresh(context, currentLang); Scaffold.of(context).showSnackBar(new SnackBar( content: new Text( FlutterI18n.translate(context, "toastMessage")), )); }, child: new Text( FlutterI18n.translate(context, "button.clickMe"))) ], ), ); }), ); } }
运行点击下面的"Premi qui",就可以观察到文字马上做了本地化翻译(这里方便观察),使用的时候直接用点击后的效果,查看就系统切换语言即可。