欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Flutter 国际化

发表日期:2018-12 文章编辑:小灯 浏览次数:2625

Flutter 官方鼓励我们在写 Flutter 应用的时候直接从 MaterialApp 开始,原因是 MaterialApp 为我们集成好了很多 Material Design 所必须的控件。

在大多默认的情况下,Material 的组件是英文说明的,因此对应中国的应用来说,要做国际化处理。

Flutter 提供了国际化的处理包,要使用它先要引入。

dependencies: flutter_localizations: sdk: flutter 

之后在 MaterialApp 里添加。

import 'package:flutter_localizations/flutter_localizations.dart';new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new HomePage(title: ''), localizationsDelegates: [ // <-- 添加 GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ // <-- 添加语言包 const Locale('zh', 'CH'), ], ) 

Dialog 中的文字是变成中文了。

自己配置语言包

上面是 flutter 配置的语言包,如果你的应用有英文和中文两个版本,那么需要自己配置语言包。

首先,定义一个 DemoLocalizations 类,这个类就是用于创建语言包的。

class DemoLocalizations { final Locale locale; DemoLocalizations(this.locale);static Map<String, Map<String, String>> _localizedValues = { 'en': { 'task title': 'Flutter Demo', 'titlebar title': 'Flutter Demo Home Page', 'click tip': 'You have pushed the button this many times:', 'inc':'Increment', }, 'zh': { 'task title': 'Flutter 示例', 'titlebar title': 'Flutter 示例主页面', 'click tip': '你一共点击了这么多次按钮:', 'inc':'增加', } };get taskTitle { return _localizedValues[locale.languageCode]['task title']; } get titleBarTitle { return _localizedValues[locale.languageCode]['titlebar title']; } get clickTop { return _localizedValues[locale.languageCode]['click tip']; } get inc { return _localizedValues[locale.languageCode]['inc']; } static DemoLocalizations of(BuildContext context) { return Localizations.of(context, DemoLocalizations); } } 

定义完 DemoLocalizations 以后,LocalizationsDelegate 里初始化它。LocalizationsDelegate 是一个抽象类,需要去继承它并实现。

class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations>{ const DemoLocalizationsDelegate();@override bool isSupported(Locale locale) { return ['en','zh'].contains(locale.languageCode); }@override Future<DemoLocalizations> load(Locale locale) { return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale)); }@override bool shouldReload(LocalizationsDelegate<DemoLocalizations> old) { return false; }static DemoLocalizationsDelegate delegate = const DemoLocalizationsDelegate(); } 

完成后,把 delegate 添加到 MaterialApp localizationsDelegates 里。

new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new HomePage(title: ''), localizationsDelegates: [ // <-- 添加代理 GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, DemoLocalizationsDelegate.delegate, ], supportedLocales: [ // <-- 添加语言包 const Locale('zh', 'CH'), ], ) 

接着使用它:

home: new MyHomePage(title: DemoLocalizations.of(context).titleBarTitle), 

是不是很复杂?是的比较复杂,这是官方推荐的做法。其实我们还可以定义一个全局的存储空间,存储这些变量在合适的时间段里使用。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/17559.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.