Flutter多語言實踐

趙鈺瑩發表於2018-08-13

簡單來講,流程圖如下:

簡單講一下整個流程:

  1. 我們先寫一個AppStrings.dart,這個檔案是整個多語言的核心,生成和使用都需要這個檔案。在這個檔案裡可以定義獲得文字的api,比如

String order_list_waiting_for_review() => Intl.message(
        'Waiting for the review',
        name: "order_list_waiting_for_review",
          locale: _localeName
      );

其中,方法名和name必須保持一致(不要問我為何會有這種坑爹要求)。'Waiting for the review'是預設文案,locale是當前的locale。
這樣定義的話,可以用下面的方式獲得文字

String text = AppStrings.of(context).order_list_waiting_for_review();
// text == "Waiting for the review"

很好理解,AppStrings.of(context)就是透過context獲得對應的locale的AppStrings,進而獲得對應的文案。

  1. 在上面以那種格式定義後,我們可以執行下面這個命令把AppStrings.dart生成intl_messages.arb

flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/app_strings.dart

*.arb是個中間產物,其內就是JSON文字。其實會有更多附加資訊,描述這個文字,不過在此省略。

{
  "order_list_waiting_for_review": "Waiting for the review",
}
  1. 生成的arb檔案只是一種語言的,我們可以把它複製成N種語言對應的檔案,比如intl_en.arb,intl_es.arb等,並把內容的value都替換成對應語言的文案。

  2. 然後再執行下面這個命令,生成messages_*.dart

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n \
   --no-use-deferred-loading lib/app_strings.dart lib/l10n/intl_*.arb

可以看到,作為入參的是lib/app_strings.dart和lib/l10n/intl_*.arb,flutter工具黨確保lib/app_strings.dart中的方法名、方法中的name引數,和lib/l10n/intl_*.arb中的json的key一致的時候,才會在生成的messages_*.dart檔案中加入對應的文案,缺一不可。

我們再回過頭來看這段程式碼

String order_list_waiting_for_review() => Intl.message(
        'Waiting for the review',
        name: "order_list_waiting_for_review",
          locale: _localeName
      );

Intl.message()方法實際上是根據locale獲取對應的message_*.dart檔案,然後再透過name找到對應的文案返回。

  1. 當然,還需要對MaterialApp定義localizationsDelegates本地化代理和supportedLocales支援的多語言,這部分在文章最開始的文件裡寫的很詳細了,就不再贅述了。

官方方案的問題

官方的方案雖然很長很繁瑣,但還是可以實現多語言的功能的,只是對於我們來講,它存在以下幾個問題:

  1. 需要在AppStrings.dart中定義文字獲得的方法,一個文字就需要定義一個方法,並且方法名和name必須一致才能和arb檔案一起生成最後的dart檔案。一個文案對應一個方法,程式碼寫起來很冗餘,並且不利於文案的列舉使用(比如文案的key之間有關係)。和native開發之前的習慣也不同。使用和生成的邏輯放到一起,倘若有幾千個文案,AppStrings.dart估計要爆表。

  2. 流程太長,不利於自動化下載語言的指令碼的實現

我們的流程

起點的i18n.py是我們自己寫的python指令碼,一共有兩個作用

  1. 從美杜莎(阿里國際化文案管理平臺)上獲得多語言文案,並重新命名成arb檔案。

前面說到,arb檔案其實是json格式的,美杜莎支援以json格式匯出文字,所以我們做的只是重新命名,不需要對內容進行更改。

  1. 在arb檔案處理好後,會拿預設的(英語)文字去生成一個dart檔案,這個dart檔案只用來作為中間產物,不會被其他dart使用的。
    其中只包含如下內容

import 'package:intl/intl.dart';
class MessagesIndex {
  String order_list_waiting_for_review() => Intl.message(
        'Waiting for the review',
        name: "order_list_waiting_for_review",
      );
  // ......
}

那麼,我們繼續呼叫生成最終產物的命令列

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n \
   --no-use-deferred-loading lib/messages_index.dart lib/l10n/intl_*.arb

發現檔案以及其內的文案已經被正確生成了。

呼叫方式

我之所以這樣更改流程,其實只有兩個目的:

  1. 可以像讀map一樣的讀取多語言文案,而不是像呼叫方法那樣去讀取。

  2. 拉取、生成多語言文案的過程可以自動化。
    透過上面一頓操作,生成文案的工作都被自動化搞定了,那我們只需要在AppStrings.dart中新增一個方法,傳入name,傳出想要的多語言文案即可:

class AppStrings {
  final String _localeName;
  // ......
  static AppStrings of(BuildContext context) {
    return Localizations.of<AppStrings>(context, AppStrings);
  }
  // AppStrings.of(context).str(stringKey)
  String str(String name) {
    return Intl.message(name, name: name, locale: _localeName);
  }
  // 重寫運算子,減少程式碼量
  // AppStrings.of(context)[stringKey]
  operator [](String messageName) => str(messageName);
}

【本文轉載自雲棲社群,作者: ,原文連結:】

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31077337/viewspace-2199965/,如需轉載,請註明出處,否則將追究法律責任。

相關文章