赵走x博客
网站访问量:151510
首页
书籍
软件
工具
古诗词
搜索
登录
75、插件开发:iOS端API实现
64、文件操作
85、图片加载原理与缓存
84、Flutter运行机制-从启动到显示
83、RenderObject和RenderBox
82、Element与BuildContext
81、Flutter UI系统
80、国际化常见问题
79、使用Intl包
78、实现Localizations
77、让App支持多语言
76、Texture和PlatformView
73、开发Flutter插件
72、插件开发:平台通道简介
71、开发Package
70、Json转Dart Model类
69、使用Socket API
68、使用WebSockets
67、实例:Http分块下载
66、Http请求-Dio http库
65、通过HttpClient发起HTTP请求
63、自绘实例:圆形背景渐变进度条
62、自绘组件 (CustomPaint与Canvas)
61、组合实例:TurnBox
60、组合现有组件
59、自定义组件方法简介
58、动画过渡组件
57、通用"切换动画"组件(AnimatedSwitcher)
56、交织动画
55、Hero动画
54、自定义路由切换动画
53、动画基本结构及状态监听
51、动画
50、通知(Notification)
49、全局事件总线
48、手势识别
47、原始指针事件处理
46、事件处理与通知
45、对话框详解
44、异步UI更新(FutureBuilder、StreamBuilder)
43、颜色和主题
42、跨组件状态共享(Provider)
41、数据共享(InheritedWidget)
40、导航返回拦截(WillPopScope)
39、功能型Widget简介
38、滚动监听及控制
37、CustomScrollView
36、GridView
35、ListView
34、SingleChildScrollView
33、可滚动组件简介
32、剪裁(Clip)
31、Scaffold、TabBar、底部导航
30、Container
29、变换(Transform)
28、装饰容器DecoratedBox
27、尺寸限制类容器
26、填充(Padding)
25、容器类Widget
24、对齐与相对定位(Align)
23、层叠布局 Stack、Positioned
22、流式布局
21、弹性布局(Flex)
20、线性布局(Row和Column)
19、布局类组件简介
18、进度指示器
17、输入框及表单
16、单选开关和复选框
15、图片及ICON
14、按钮
13、文本、字体样式
12、状态管理
11、Widget简介
10、Flutter异常捕获
9、调试Flutter应用
8、资源管理
7、包管理
6、路由管理
5、第一个Flutter应该:计数器应用示例
4、Dart语言简介
3、搭建Flutter开发环境
2、初识Flutter
1、移动开发技术简介
78、实现Localizations
资源编号:76232
Flutter实战
书籍
热度:110
前面讲了Material组件库如何支持国际化,本节我们将介绍一下我们自己的UI中如何支持多语言。根据上节所述,我们需要实现两个类:一个Delegate类一个Localizations类,下面我们通过一个实例说明。
前面讲了Material组件库如何支持国际化,本节我们将介绍一下我们自己的UI中如何支持多语言。根据上节所述,我们需要实现两个类:一个Delegate类一个Localizations类,下面我们通过一个实例说明。 # 实现Localizations类 我们已经知道Localizations类中主要实现提供了本地化值,如文本: ``` //Locale资源类 class DemoLocalizations { DemoLocalizations(this.isZh); //是否为中文 bool isZh = false; //为了使用方便,我们定义一个静态方法 static DemoLocalizations of(BuildContext context) { return Localizations.of
(context, DemoLocalizations); } //Locale相关值,title为应用标题 String get title { return isZh ? "Flutter应用" : "Flutter APP"; } //... 其它的值 } ``` DemoLocalizations中会根据当前的语言来返回不同的文本,如title,我们可以将所有需要支持多语言的文本都在此类中定义。DemoLocalizations的实例将会在Delegate类的load方法中创建。 # 实现Delegate类 Delegate类的职责是在Locale改变时加载新的Locale资源,所以它有一个load方法,Delegate类需要继承自LocalizationsDelegate类,实现相应的接口,示例如下: ``` //Locale代理类 class DemoLocalizationsDelegate extends LocalizationsDelegate
{ const DemoLocalizationsDelegate(); //是否支持某个Local @override bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode); // Flutter会调用此类加载相应的Locale资源类 @override Future
load(Locale locale) { print("xxxx$locale"); return SynchronousFuture
( DemoLocalizations(locale.languageCode == "zh") ); } @override bool shouldReload(DemoLocalizationsDelegate old) => false; } ``` shouldReload的返回值决定当Localizations组件重新build时,是否调用load方法重新加载Locale资源。一般情况下,Locale资源只应该在Locale切换时加载一次,不需要每次在Localizations重新build时都加载,所以返回false即可。可能有些人会担心返回false的话在APP启动后用户再改变系统语言时load方法将不会被调用,所以Locale资源将不会被加载。事实上,每当Locale改变时Flutter都会再调用load方法加载新的Locale,无论shouldReload返回true还是false。 # 最后一步:添加多语言支持 和上一节中介绍的相同,我们现在需要先注册DemoLocalizationsDelegate类,然后再通过DemoLocalizations.of(context)来动态获取当前Locale文本。 只需要在MaterialApp或WidgetsApp的localizationsDelegates列表中添加我们的Delegate实例即可完成注册: ``` localizationsDelegates: [ // 本地化的代理类 GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, // 注册我们的Delegate DemoLocalizationsDelegate() ], ``` 接下来我们可以在Widget中使用Locale值: ``` return Scaffold( appBar: AppBar( //使用Locale title title: Text(DemoLocalizations.of(context).title), ), ... //省略无关代码 ) ``` 这样,当在美国英语和中文简体之间切换系统语言时,APP的标题将会分别为“Flutter APP”和“Flutter应用”。 # 总结 本节我们通过一个简单的示例说明了Flutter应用国际化的基本过程及原理。但是上面的实例还有一个严重的不足就是我们需要在DemoLocalizations类中获取title时手动的判断当前语言Locale,然后返回合适的文本。试想一下,当我们要支持的语言不是两种而是8种甚至20几种时,如果为每个文本属性都要分别去判断到底是哪种Locale从而获取相应语言的文本将会是一件非常复杂的事。还有,通常情况下翻译人员并不是开发人员,能不能像i18n或i10n标准那样可以将翻译单独保存为一个arb文件交由翻译人员去翻译,翻译好之后开发人员再通过工具将arb文件转为代码。答案是肯定的!我们将在下一节介绍如何通过Dart intl包来实现这些。