Flutter圈子FlutterFlutter

Flutter-国际化适配终结者

2019-02-22  本文已影响49人  rhyme_lph

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

Flutter i18n官网

安装插件

该神器为idea的一款插件,名为Flutter i18n,大家可以到开发工具的设置中找得到。我这里使用的是Android Studio工具开发,idea工具也是可以找到的,vscode就不知道了,哈哈。

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

使用

如果你已经成功安装插件,打开项目后,会发现自动添加以下两个文件:

ARB文件

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

添加国际化支持

在使用该插件支持,我们还是要知道,该插件依赖插件包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.
  @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: '本地化'),
    );
  }
}

来一个一个的解释以下:

声明资源

现在我们可以在.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文件更多语法

{
  "dialogTip":"Hello $name"
}

使用:

S.of(context).dialogTip("Rhyme");
{
  "selectZero":"没有了",
  "selectOne":"一个",
  "selectMany":"很多",
  "selectOther":"其它"
}

使用:

    S.of(context).select(0);//零个
    S.of(context).select(1);//一个
    S.of(context).select("many");//多个
    S.of(context).select(null);//其它

以上就是这篇文章的全部内容,阅读完后就会发现,跟Android中的R文件有异曲同工的效果!如果你学会了,希望能收到你的大礼包(****** 点亮红心 ****** 关注 ****** 转发 ******) 你的支持,是我创作和分享的动力!

上一篇下一篇

猜你喜欢

热点阅读