Flutter-国际化支持

Flutter 国际化

详情链接

1:让App支持多语言

需要我们在开发时需要为应用程序支持的每种语言环境设置“本地化”的一些值,如文本和布局。
Flutter SDK已经提供了一些组件和类来帮助我们实现国际化。这里主要是指 文案(字符串)

支持国际化

1:我们以MaterialApp为入口,大多数应用都是通过MaterialApp为入口。

2:Flutter SDK 默认支持美国英语本地化资源(主要是文本),其他语言需要添加包依赖 flutter_localizations

3:指定MaterialApplocalizationsDelegatessupportedLocales

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
import 'package:flutter_localizations/flutter_localizations.dart';
new MaterialApp(
 localizationsDelegates: [
   // 本地化的代理类
   GlobalMaterialLocalizations.delegate, //PS: 基于WidgetsApp类为入口的应用程序进行国际化时, 不需要这个
   GlobalWidgetsLocalizations.delegate,// 定义组件默认的文本方向,从左到右或从右到左.
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [ // 当前应用支持的locale列表
    const Locale('en', 'US'), // 美国英语
    const Locale('zh', 'CN'), // 中文简体
    //其它Locales
  ],
  // ...
)

获取当前区域Locale。

PS: 不太好用。

Locale locale = Localizations.localeOf(context);

手动指定local

 Widget widget1 = MaterialApp(
      locale: const Locale('en', 'US'),//手动指定locale
    );

监听系统语言切换

当我们更改系统语言设置时,APP中的Localizations组件会重新构建,Localizations.localeOf(context) 获取的Locale就会更新,最终界面会重新build达到切换语言的效果,但是这个过程是隐式完成的。

我们可以通过localeResolutionCallback或localeListResolutionCallback回调来监听locale改变的事件。

Widget widget1 = MaterialApp(
      // typedef LocaleResolutionCallback = Locale? Function(Locale? locale, Iterable<Locale> supportedLocales);
      localeResolutionCallback: (Locale? locale, Iterable<Locale> supportedLocales){
        //local: 当前的当前的系统语言设置
        //supportedLocales: 为当前应用支持的locale列表,是开发者在MaterialApp中通过supportedLocales属性注册的
        // return Locale?
      },
      // typedef LocaleListResolutionCallback = Locale? Function(List<Locale>? locales, Iterable<Locale> supportedLocales);
      localeListResolutionCallback: (List<Locale>? locales, Iterable<Locale> supportedLocales){
        //local: 当前的当前的locales 列表
        //supportedLocales: 为当前应用支持的locale列表,是开发者在MaterialApp中通过supportedLocales属性注册的
        // return Locale?
    },
   );
}
Locale 本地设置

Localization组件

Localizations组件用于加载和查找应用当前语言下的本地化值或资源。应用程序通过Localizations.of(context,type) (opens new window)来引用这些对象。 如果设备的Locale区域设置发生更改,则Localizations 组件会自动加载新区域的Locale值,然后重新build使用(依赖)了它们的组件,之所以会这样,是因为Localizations内部使用了InheritedWidget (opens new window),该组件:当子组件的build函数引用了InheritedWidget时,会创建对InheritedWidget的隐式依赖关系。因此,当InheritedWidget发生更改时,即Localizations的Locale设置发生更改时,将重建所有依赖它的子组件。

使用系统打包好的LocalizationDelegates

为了尽可能小而且简单,flutter软件包中仅提供美国英语值的MaterialLocalizationsWidgetsLocalizations接口的实现。

ps: GlobalCupertinoLocalizations也提供了。

如果我们要让自己的布局支持多语言,那么就需要实现自己的Localizations

2:实现自定义Localizations

static const LocalizationsDelegate<MaterialLocalizations> delegate = _MaterialLocalizationsDelegate();

自定义实现Localizations

我们需要实现两个类:一个Delegate类一个Localizations类。

实现Localizations类

//Locale资源类
class DemoLocalizations {
  DemoLocalizations(this.isZh);
  //是否为中文
  bool isZh = false;
  //为了使用方便,我们定义一个静态方法
  static DemoLocalizations of(BuildContext context) {
    return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
  }
  //Locale相关值,title为应用标题
  String get title {
    return isZh ? "Flutter应用" : "Flutter APP";
  }
  //... 其它的值  
}

实现Delegate类

Delegate类的职责是在Locale改变时加载新的Locale资源,所以它有一个load方法,Delegate类需要继承自LocalizationsDelegate类,实现相应的接口

//Locale代理类
class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
  const DemoLocalizationsDelegate();

  //是否支持某个Local
  @override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

  // Flutter会调用此类加载相应的Locale资源类
  @override
  Future<DemoLocalizations> load(Locale locale) {
    print("$locale");
    return SynchronousFuture<DemoLocalizations>(
        DemoLocalizations(locale.languageCode == "zh")
    );
  }

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

添加多语言支持

先注册DemoLocalizationsDelegate类,然后再通过DemoLocalizations.of(context)来动态获取当前Locale文本。

localizationsDelegates: [
 // 本地化的代理类
 GlobalMaterialLocalizations.delegate,
 GlobalWidgetsLocalizations.delegate,
 // 注册我们的Delegate
 DemoLocalizationsDelegate()
],

食用:

return Scaffold(
  appBar: AppBar(
    //使用Locale title  
    title: Text(DemoLocalizations.of(context).title),
  ),
  ... //省略无关代码
 ) 

3:捷径— 使用Intl包

dependencies:
  #...省略无关项
  intl: ^0.15.7 
dev_dependencies:
   #...省略无关项
  intl_translation: ^0.17.2  

intl_translation (opens new window)包主要包含了一些工具,它在开发阶段主要的作用是从代码中提取要国际化的字符串到单独的arb文件和根据arb文件生成对应语言的dart代码。

intl包主要是引用和加载intl_translation生成后的dart代码。

食用详情 简单步骤:

  • 创建必要目录,包含arb文件
  • 实现Localizations和Delegate类,使用Intl包中方法。
  • 添加需要国际化的属性
  • 生成arb文件,通过命令
  • 生成Dart代码,通过命令
  • 合成命令脚本

4:超捷径 插件Intl

Flutter Intl 插件食用
简洁好用。

5:国际化一般会碰到的问题

1:应用标题国际化
2:为英语系国家指定同一个locale

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,392评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,258评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,417评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,992评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,930评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,199评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,652评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,327评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,463评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,382评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,432评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,118评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,704评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,787评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,999评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,476评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,057评论 2 341

推荐阅读更多精彩内容

  • 国际化:支持多种语言。为应用程序支持的每种语言设置本地化值,如文本(语言差异)、布局(阅读方向差异)、图片(国旗)...
    平安喜乐698阅读 3,235评论 0 3
  • 前言 如果APP有需要支持多种语言,就需要支持国际化,无论是android和ios,现在针对flutter的国际化...
    lebonbill阅读 10,569评论 4 6
  • 如果App的用户使用的是不同语言,那进行国际化是必要的。国际化主要包括文案的国际化(不同的语言展示不同的文案)和布...
    chonglingliu阅读 2,114评论 5 6
  • 概述 国际化的认识 国际化的适配 国际化的工具 一、国际化的认识 开发一个App,如果我们的App需要面向不同的语...
    IIronMan阅读 694评论 0 2
  • 一. 国际化的认识 开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐...
    5e4c664cb3ba阅读 1,377评论 0 3