Flutter-国际化适配终结者
转自:https://juejin.im/post/5c701379f265da2d9b5e196a#heading-1
Flutter-国际化适配终结者
大家好,很久不见,甚是想念,今天,我们来学习以下如何使用国际化神器
Flutter i18n
,该神器为一位叫Razvan Lung
的外国大佬开发的!完美解决Flutter
在开发应用时,字符串资源统一存放的问题,好的,我们现在开始学习吧!
Flutter i18n官网
安装插件
该神器为
idea
的一款插件,名为Flutter i18n
,大家可以到开发工具的设置中找得到。我这里使用的是Android Studio
工具开发,idea
工具也是可以找到的,vscode
就不知道了,哈哈。
如图,先打开到上面的Plugins
这一栏,然后点击插件列表下面的Browe repositories
,然后在弹出的界面中输入Flutter i18n
。
然后点击右边的绿色按钮install
,下载安装完之后会要求重启开发工具,重启就可以了
使用
如果你已经成功安装插件,打开项目后,会发现自动添加以下两个文件:
lib/generated/i18n.dart
主要的国际化文件,主要使用的类为S
res/values/string_en.arb
该文件主要适配英文语言,内容为json
格式 到这里我们会出现疑惑,.arb
是什么格式的文件,下面我们来了解以下.arb
格式
ARB文件
ARB文件扩展名为:Application Resource Bundle 意为应用程序资源包,并得到Google的支持,每个.arb
文件都包含一个JSON表,该表从资源ID映射到本地化值,文件名包含已为其转换值的语言环境,你可以选中res/values
点击右键-New-Arb File,在弹出的界面中选择你要的语言环境
如图上:
- 第一栏为语言
- 第二栏为特定的区域 为了方便理解我们在
Language
一栏中拉到底部找到zh:Chinese
,在右边可以很明确的知道特定区域表示什么 - Any Region 表示所有地区,优先级为:特定地区>所有地区
- CN:China 中国(大陆)
- HK:Hong Kong SAR China 香港特别行政区
- MO:Macau SAR China 澳门特别行政区
- SG:Singapore 新加波
- TW:Taiwan 台湾 看到这里,是不是清晰了很多
添加国际化支持
在使用该插件支持,我们还是要知道,该插件依赖插件包
flutter_localizations
,否则会出现某些地区支持会出错
在我们的项目的pubspec.yaml
下添加flutter_localizations
....
dependencies:flutter_localizations:sdk: flutter
....
复制代码
然后在命令行运行下Flutter packages get
回到我们有MaterialApp
或者MaterialApp
或者CupertinoApp
的文件下,导入以下包,我的是main.dart
文件
import 'generated/i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
复制代码
我使用的是刚新建的Flutter
项目,添加下面的内容
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.red,),
// newlocalizationsDelegates: const [S.delegate,GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate],supportedLocales: S.delegate.supportedLocales,
// newhome: MyHomePage(title: '本地化'),);}
}
复制代码
来一个一个的解释以下:
localizationsDelegates
本地化委托参数S.delegate
我们项目的本地化委托类,这个你不用管,他会根据你的arb
文件自动生成对应的函数GlobalMaterialLocalizations.delegate
和GlobalWidgetsLocalizations.delegate
为flutter_localizations
插件包提供的委托,如果你使用MaterialApp
这个部件的GlobalMaterialLocalizations.delegate
这个可以不用supportedLocales
支持的本地化S.delegate.supportedLocales
我们项目支持的本地化,这个你不用管,它会在你添加arb
文件时自动更新你的支持的本地化
声明资源
现在我们可以在.arb
文件下添加JSON内容了 string_en.arb
添加如下:
{"appName":"Carpe Diem"
}
复制代码
如果你想支持中文,可以按上面的Ard
文件操作步骤进行创建 string_zn_CN.arb
内容如下:
{"appName":"及时行乐"
}
复制代码
支持香港 string_zn_HK.arb
内容如下:
{"appName":"及時行樂"
}
复制代码
使用资源
使用资源,我们只需要一行代码
S.of(context).appName
复制代码
why?这样就可以了?嗯,是的,插件会在你写json
的时候会自动生成函数 S
类自动添加:
String get appName => "Carpe Diem";
复制代码
$zh_CN
类自动添加
@overrideString get appName => "及时行乐";
复制代码
$zh_HK
类自动添加
@overrideString get appName => "及時行樂";
复制代码
Arb文件更多语法
- 1.占位符
{"dialogTip":"Hello $name"
}
复制代码
使用:
S.of(context).dialogTip("Rhyme");
复制代码
- 2.复数 支持语法为:key+
zero
/one
/many
/other
{"selectZero":"没有了","selectOne":"一个","selectMany":"很多","selectOther":"其它"
}
复制代码
使用:
S.of(context).select(0);//零个S.of(context).select(1);//一个S.of(context).select("many");//多个S.of(context).select(null);//其它
复制代码
- 3.忽略
$
符号 如果你要忽略该符号,请在前面加\
反斜杠
提取字符串
很多时候,我们需要像Android一样,将光标放到字符串中,使用快捷键
alt+enter
对字符串进行快速提取,该插件也同样适应
将编辑光标放在所要提取的字符串后,使用快捷键alt+enter
,可以看到如图所示:
选中Extract the string resource
,会出现如下界面:
String id
对应为json
表中的key
String value
对应为json
表中的value
Create the string for languages
为需要添加到的语言文件,可以多选- 下面的四个按钮分别为:添加一种语言、删除一种语言、全选、全不选
点击ok之后,就会自动替换
指定一种语言
有时候,我们需要指定一种语言,那么我们该怎么操作呢,这里直接上代码
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: S.of(context).flutter_demo,theme: ThemeData(primarySwatch: Colors.red,),localizationsDelegates: const [S.delegate,GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate],supportedLocales: S.delegate.supportedLocales,
// new localeResolutionCallback:S.delegate.resolution(fallback: const Locale('en', '')),
// newhome: MyHomePage(title: '本地化'),);}
}
复制代码
或者
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: S.of(context).flutter_demo,theme: ThemeData(primarySwatch: Colors.red,),localizationsDelegates: const [S.delegate,GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate],supportedLocales: S.delegate.supportedLocales,
// new localeListResolutionCallback: S.delegate.listResolution(fallback: const Locale('en', ''),),
// newhome: MyHomePage(title: '本地化'),);}
}
复制代码
两种方式也是同样可以的,设置之后就会忽略你当前设备的语言,直接指定为英文语言环境!
切换语言
如果你有切换语言的需求,可以这样实现
// new
ValueChanged<Locale> localeChange;
// new
class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {
// new Locale _locale = const Locale('en', '');@overridevoid initState() {super.initState();localeChange = (locale) {setState(() {_locale = locale;});};}
// new @overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),localizationsDelegates: const [S.delegate,GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate],supportedLocales: S.delegate.supportedLocales,
// remove localeListResolutionCallback
// edithome: Builder(builder: (BuildContext context) {return Localizations.override(context: context,locale: _locale,child: MyHomePage(title: 'Flutter Demo Home Page'),);},),);}
}
// edit
// 在其他地方调用
localeChange(Locale('zh', ''));//zh为中文
Flutter-国际化适配终结者相关推荐
- Flutter自带国际化适配自动生成方案
1. 介绍 在研究别人的项目期间,突然发现了此方案,特意分享,原来flutter自己已经有一套成熟的国际化生成功能,配置完成后,只需要编写arb即可,主要有以下步骤 1.新建一个l10n.yaml文件 ...
- flutter 国际化_从0开始设计Flutter独立APP | 第二篇: 完整的国际化语言支持
鉴于Flutter高性能渲染和跨平台的优势,闪点清单在移动端APP上,使用了完整的Flutter框架来开发.既然是完整APP,架构搭建完全不受历史Native APP的影响,没有历史包袱的沉淀,设计也 ...
- flutter屏幕适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设 ...
- Android7.0以上多系统语言的国际化适配
前言 近期偶然发现一个问题,我们的应用在7.0以上的个别机型上,会遇到国际化不对的问题,现象是:手机明明设置了中文,应用却可能显示成英文. 问题分析 问题机型:三星s8 plus 系统版本:Andro ...
- 极其简单的Flutter 屏幕适配
A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案) 一 概述 由于 Flutter 的应用场景很多,不只是 an ...
- Android 屏幕适配终结者
本文作者: 布兰柯基 本文链接: https://blankj.com/2018/12/18/android-adapt-screen-killer/ 文末有彩蛋 背景 之前基于头条的适配方案写了篇文 ...
- Android 国际化适配之中英文模式切换
前言 最近在做一个app,要求有中文模式与英文模式,其实就是国际化适配了,这个不难但是感觉非常麻烦呀,先看下我写的简单例子,这样比较直观点: 接下来我介绍下如何去实现它: 布局文件中的Textview ...
- flutter 屏幕适配 字体大小适配
前言: 现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到 ...
- flutter 国际化_Flutter 开发实战资源推荐
开工第一天,来点轻松的资源推荐. 这是一篇实战类资源推荐,其实Flutter的入门资料官方已经做得很好了,如果你是零基础,还是建议先啃一遍官方的教程,然后再看以下实战资源,相信在你看官方课程中涉及到的 ...
最新文章
- python 利用numpy进行数据分析
- 网骗欺诈?网络裸奔?都是因为 HTTP?
- dedecms手机站要同步pc站的图片
- Python map/reduce
- 【未解决】Flink : Error notifying leader istener about new leader The RPC connection is already closed
- python---python实现快速排序
- 鉴定网站是否允许IPV6访问方法(湖大IPV6下载流量免费)
- 双显示器 启动黑屏 黑苹果_黑苹果开机加载黑屏
- H5页面 iPhoneX适配
- openOCD和Jlink仿真器
- 正交设计,OO与SOLID
- 【自然语言处理】中文开源工具汇总(7种)
- 我的Android前生今世之缘-学习经验-安卓教程(六)
- Python的线程13 简易限流器实现
- 【论文翻译】ORB-SLAM: A Versatile and Accurate Monocular SLAM System
- 新加dell服务器硬盘状态不正确问题
- javaweb各种框架组合案例(三):maven+spring+springMVC+hibernate
- [基础架构] [Flink] Flink/Flink-CDC的部署和配置
- 计算机网络常用熟知的端口
- 叮咚,Redis OM对象映射框架来了