Flutter-國際化適配終結者

Flutter 安卓開發 · 發表 2019-02-25 10:53:46

摘要：大家好，很久不見，甚是想念，今天，我們來學習以下如何使用國際化神器 Flutter i18n ，該神器為一位叫 Razvan Lung 的外國大佬開發的！完美解決 Flutter 在開發應用時，字串資源統一存放的問題，好的，我們現在開始學習吧！ Flutter i18n官網安...

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

選中 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.
@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: '本地化'),
);
}
}
複製程式碼

兩種方式也是同樣可以的，設定之後就會忽略你當前裝置的語言，直接指定為英文語言環境!

以上就是這篇文章的全部內容，閱讀完後就會發現，跟Android中的R檔案有異曲同工的效果！如果你學會了，希望能收到你的大禮包(****** 點亮紅心 ****** 關注 ****** 轉發 ******) 你的支援，是我創作和分享的動力！