Flutter-国际化适配终结者

时间  2019-11-06
标签 flutter 国际化 适配 终结者 繁體版
原文   原文链接

你们好，好久不见，甚是想念，今天，咱们来学习如下如何使用国际化神器Flutter i18n，该神器为一位叫Razvan Lung的外国大佬开发的！完美解决Flutter在开发应用时，字符串资源统一存放的问题，好的，咱们如今开始学习吧！git

Flutter i18n官网

安装插件

该神器为idea的一款插件，名为Flutter i18n,你们能够到开发工具的设置中找获得。我这里使用的是Android Studio工具开发,idea工具也是能够找到的，vscode就不知道了，哈哈。github

image.png
如图，先打开到上面的 Plugins这一栏，而后点击插件列表下面的 Browe repositories,而后在弹出的界面中输入 Flutter i18n。
image.png
而后点击右边的绿色按钮 install,下载安装完以后会要求重启开发工具,重启就能够了
image.png

使用

若是你已经成功安装插件，打开项目后，会发现自动添加如下两个文件：json

  • lib/generated/i18n.dart 主要的国际化文件，主要使用的类为S
  • res/values/string_en.arb 该文件主要适配英文语言，内容为json格式 到这里咱们会出现疑惑，.arb是什么格式的文件，下面咱们来了解如下.arb格式

ARB文件

arb文件.png
ARB文件扩展名为：Application Resource Bundle 意为应用程序资源包，并获得Google的支持，每一个 .arb文件都包含一个JSON表,该表从资源ID映射到本地化值,文件名包含已为其转换值的语言环境，你能够选中 res/values点击 右键-New-Arb File，在弹出的界面中选择你要的语言环境
image.png
如图上：

  • 第一栏为语言
  • 第二栏为特定的区域 为了方便理解咱们在Language一栏中拉到底部找到zh:Chinese,在右边能够很明确的知道特定区域表示什么
    image.png
  • Any Region 表示全部地区,优先级为：特定地区>全部地区
  • CN：China 中国（大陆）
  • HK：Hong Kong SAR China 香港特别行政区
  • MO：Macau SAR China 澳门特别行政区
  • SG：Singapore 新加波
  • TW：Taiwan 台湾 看到这里，是否是清晰了不少

添加国际化支持

在使用该插件支持，咱们仍是要知道，该插件依赖插件包flutter_localizations，不然会出现某些地区支持会出错app

在咱们的项目的pubspec.yaml下添加flutter_localizationsless

....
dependencies:
 flutter_localizations:
 sdk: flutter
....
复制代码

而后在命令行运行下Flutter packages get 回到咱们有MaterialApp或者MaterialApp或者CupertinoApp的文件下，导入如下包，个人是main.dart文件ide

import 'generated/i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
复制代码

我使用的是刚新建的Flutter项目，添加下面的内容函数

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
// new
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
// new
      home: 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类自动添加

@override
  String get appName => "及时行乐";
复制代码

$zh_HK类自动添加

@override
  String 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，能够看到如图所示：

image.png
选中 Extract the string resource，会出现以下界面：
image.png

  • String id 对应为json表中的key
  • String value 对应为json表中的value
  • Create the string for languages 为须要添加到的语言文件，能够多选
  • 下面的四个按钮分别为：添加一种语言、删除一种语言、全选、全不选

点击ok以后，就会自动替换

image.png

指定一种语言

有时候，咱们须要指定一种语言，那么咱们该怎么操做呢，这里直接上代码

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget 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', '')),
// new
      home: MyHomePage(title: '本地化'),
    );
  }
}
复制代码

或者

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget 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', ''),),
// new
      home: 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', '');

  @override
  void initState() {
    super.initState();
    localeChange = (locale) {
      setState(() {
        _locale = locale;
      });
    };
  }
// new 
  @override
  Widget 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
// edit
      home: Builder(
        builder: (BuildContext context) {
          return Localizations.override(
            context: context,
            locale: _locale,
            child: MyHomePage(title: 'Flutter Demo Home Page'),
          );
        },
      ),
    );
  }
}
// edit
// 在其余地方调用
localeChange(Locale('zh', ''));//zh为中文
复制代码

以上就是这篇文章的所有内容，阅读完后就会发现，跟Android中的R文件有殊途同归的效果！若是你学会了，但愿能收到你的大礼包(****** 点亮红心 ****** 关注 ****** 转发 ******) 你的支持，是我创做和分享的动力！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程