Flutter-國際化適配終結者

rhyme_lph發表於2019-02-22
Flutter

大家好，很久不見，甚是想念，今天，我們來學習以下如何使用國際化神器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

使用

如果你已經成功安裝外掛，開啟專案後，會發現自動新增以下兩個檔案：

  • 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，否則會出現某些地區支援會出錯

在我們的專案的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: '本地化'),
    );
  }
}
複製程式碼

來一個一個的解釋以下：

  • 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檔案有異曲同工的效果！如果你學會了，希望能收到你的大禮包(****** 點亮紅心 ****** 關注 ****** 轉發 ******) 你的支援，是我創作和分享的動力！

相關文章