Flutter1.22最新的多國語支持配置和使用

Flutter1.22現(xiàn)已發(fā)布

? 最新版本中脖祈，隨之發(fā)布了很多新的特性以及修復(fù)了一些bug，現(xiàn)在我們說說其中的新的多國語插件刷晋。個(gè)人感覺新多國語操作，多了一些模板性的東西眼虱，但是也方便了很多東西。

? 話不多說捏悬，現(xiàn)在我們進(jìn)入正題撞蚕，如果使用新插件呢？

配置項(xiàng)目的yaml文件

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: #配置多國語支持
    sdk: flutter
  intl: 0.16.1   #多國語插件
  
  
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  generate: true  #新增配置邮破，自動(dòng)多國語代碼生成

?

項(xiàng)目新增配置l10n.yaml

arb-dir: lib/l10n  #指定arb多國語文件目錄
template-arb-file: app_zh.arb #指定arb多國語文件
output-localization-file: app_localizations.dart  #指定多國語配置生成的代碼文件，代碼中自動(dòng)生成類文件AppLocalizations.dart

l10n.yaml 文件可配置的屬性有：

項(xiàng)目中使用多國語化

? 新建arb文件摧莽，項(xiàng)目下lib文件目錄下新建l10n文件夾，然后新建app_zh.arb多國語文件

? app_zh.arb文件中配置如下：

{
    "@@locale": "zh", //標(biāo)識(shí)語言為中文
    "homePageTitle": "首頁", //標(biāo)識(shí)名
    "@homePageTitle": { //標(biāo)識(shí)對應(yīng)的一些屬性描述
        "description": "主頁標(biāo)題"
    },
    "helloWorld": "世界你好啊蚁袭！{userName}", //標(biāo)識(shí)名及參數(shù)數(shù)據(jù)
    "@helloWorld": { //標(biāo)識(shí)對應(yīng)的一些屬性描述
        "description": "The conventional newborn programmer greeting",
        "placeholders": { //占位符描述
            "userName": {
                "type": "String", //占位符類型
                "example": "小明" 
            }
        }
    }
}

然后重新Rebuild項(xiàng)目石咬，項(xiàng)目會(huì)自動(dòng)生成app_localizations.dart文件，使用方法 AppLocalizations.of(context).標(biāo)識(shí)符 獲得該標(biāo)識(shí)對應(yīng)的字符串删性。

1. main.dart 文件

   import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // 添加改行引用
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) => MaterialApp(
         onGenerateTitle: (context) =>
             AppLocalizations.of(context).helloWorld("Hello 1"), //引用多國語標(biāo)識(shí)
         theme: ThemeData(
             primarySwatch: Colors.blue,
             visualDensity: VisualDensity.adaptivePlatformDensity),
         localizationsDelegates: AppLocalizations.localizationsDelegates,
         supportedLocales: AppLocalizations.supportedLocales,
         home: HomePage());
   }
   

2. home_page.dart 文件

   import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // 添加改行引用
     
   class HomePage extends StatefulWidget {
     HomePage({Key key}) : super(key: key);
   
     @override
     _HomePageState createState() => _HomePageState();
   }
   
   class _HomePageState extends State<HomePage> {
     @override
     Widget build(BuildContext context) => Scaffold(
         appBar: AppBar(
             centerTitle: true,
             title: Text(AppLocalizations.of(context).homePageTitle)), //引用多國語標(biāo)識(shí)
         body: Container(
             alignment: Alignment.center,
             child: Column(
                 mainAxisAlignment: MainAxisAlignment.start,
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
                   Text(AppLocalizations.of(context).helloWorld("hello 2"))
                 ])),
         bottomNavigationBar: BottomNavigationBar(items: [
           BottomNavigationBarItem(icon: Icon(Icons.home), label: "首頁"),
           BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
           BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
         ]));
   }
   
   

其他相關(guān)多國語化參數(shù)描述蹬挺，如下：

1. 字符串

   {
     "hello" : "Hello{userName}", 
       "@hello" : {
       "description":"Amessagewithasingleparameter",
     "placeholders": {
       "userName": {
       "type":"String", 
       "example": "Bob"
           }
     }
   }
   

   調(diào)用方式：AppLocalizations.of(context).hello("Jacket Chen")

2. 多個(gè)參數(shù)

   {
     "greeting":"{hello} {world}",
       "@greeting": {
           "description": "Amessagewithatwoparameters",
       "placeholders": {
                   "hello": {}, //{}中占位符屬性描述
                   "world": {} //同上
       }
   }
   

   調(diào)用方式：AppLocalizations.of(context).greeting('Hello', 'World')

   3. 數(shù)字以及貨幣

   NumberFormat.compactLong("en_US").format(1200000) 該調(diào)用結(jié)果為：1.2million

   你可以使用類型為int或者double的占位符來表達(dá)同樣的結(jié)果：

   {
     "numberOfDataPoints": "Number of data points: {value}",
       "@numberOfDataPoints": {
       "description": "Amessagewithaformattedintparameter",
       "placeholders": {
               "value": {
                   "type":"int", 
           "format": "compactLong"
               } 
       }
   }
   

   調(diào)用方式：AppLocalizations.of(context).numberOfDataPoints(1200000)

   format對應(yīng)的取值巴帮，如下：

   format的取值	numberOfDataPoints(1200000) 對應(yīng)的輸出結(jié)果
   compact	1.2M
   compactCurrency*	$1.2M
   compactSimpleCurrency*	$1.2M
   compactLong	1.2 millions
   currency*	USD1,200,000.00
   decimalPattern	1,200,000
   decimalPercentPattern*	120,000,000%
   percentPattern	120,000,000%
   scientificPattern	1E6
   simpleCurrency*	$1,200,000.00

   ：帶星號(hào)的格式對應(yīng)的取值有可選參數(shù)類型虐秋，如：optionalParameters*，他們的構(gòu)造函數(shù)有可選參數(shù)雪猪。

   配置方式如下：

   {
     "numberOfDataPoints": "Number of data points: {value}",
     "@numberOfDataPoints": {
               "description": "Amessagewithaformattedintparameter",
           "placeholders" : {
                       "value": {
                           "type": "int",
                           "format": "compactCurrency",
                           "optionalParameters": {
                   "decimalDigits" : 2
                           }
               }
      }
   }
   

   當(dāng)配置以上內(nèi)容以后起愈，numberOfDataPoints()的輸出結(jié)果將會(huì)是：USD1.20M

   4. 日期

   {
     "helloWorldOn": "Hello World on {date}",
     "@helloWorldOn": {
               "description": "Amessagewithadateparameter", 
           "placeholders": {
                       "date": { 
               "type": "DateTime", 
               "format": "yMd" //日期輸出格式
             }
         }
     }
   }
   

   在應(yīng)用中抬虽，如果語言是英語(美國)，將輸出表達(dá)式 7/10/1996 ; 如果語言是俄語阐污，將輸出表達(dá)式 10.07.1996 。
   調(diào)用方式：AppLocalizations.of(context).helloWorldOn(DateTime.utc(1996,7,10))

   5. 復(fù)數(shù)

   一般情況下笛辟，數(shù)字在不同數(shù)量下有不同的展示效果序苏，在這里，要求數(shù)據(jù)類型必須是整型忱详，而且要求數(shù)據(jù)必須大于等于0。在新的多國語化插件配置中监透，有以下多種可選配置。

   要表達(dá)的結(jié)果	表達(dá)式
   zero	=0{no wombats}
   one	=1{one wombat}
   two	=2{two wombats}
   few	few{the {count} wombats}
   3-10, fractions	many{{count} wombats}
   other	other{{count} wombats}

   ：表達(dá)式開始必須聲明變量以及使用plural*標(biāo)識(shí)該表達(dá)式為復(fù)數(shù)表達(dá)式院刁，如下案例：

   "nWombats": "{count,plural, =0{no wombats} other{{count} wombats}}",?
   "@nWombats": {
       "description" : "Apluralmessage",
     "placeholders" : {
               "count": { 
           "type" : "int",
               }
     }
   }
   

   *：如果表達(dá)式中還會(huì)有其他表達(dá)式的值粪狼，則可以如下編寫：

   "nThings": "{count,plural, =0{no {thing}s} other{{count} {thing}s}}",
   "@nThings": {
           "description" : "Apluralmessagewithanadditionalparameter",
       "placeholders" : {
                   "count" : { 
             "type" :"int"
                   },
           "thing" : {
             "example" :"wombat"
                   }
           }
   }
   

   nThings(0, “wombat”) 和 nThings(5, “wombat”) 將返回與之前一樣的字符串。