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教程