Flutter1.22最新的多国语支持配置和使用

Flutter1.22现已发布

​ 最新版本中，随之发布了很多新的特性以及修复了一些bug，现在我们说说其中的新的多国语插件。个人感觉新多国语操作，多了一些模板性的东西，但是也方便了很多东西。

​ 话不多说，现在我们进入正题，如果使用新插件呢？

配置项目的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  #新增配置，自动多国语代码生成

​

项目新增配置l10n.yaml

arb-dir: lib/l10n  #指定arb多国语文件目录
template-arb-file: app_zh.arb #指定arb多国语文件
output-localization-file: app_localizations.dart  #指定多国语配置生成的代码文件，代码中自动生成类文件AppLocalizations.dart

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

项目中使用多国语化

​ 新建arb文件，项目下lib文件目录下新建l10n文件夹，然后新建app_zh.arb多国语文件

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

{
    "@@locale": "zh", //标识语言为中文
    "homePageTitle": "首页", //标识名
    "@homePageTitle": { //标识对应的一些属性描述
        "description": "主页标题"
    },
    "helloWorld": "世界你好啊！{userName}", //标识名及参数数据
    "@helloWorld": { //标识对应的一些属性描述
        "description": "The conventional newborn programmer greeting",
        "placeholders": { //占位符描述
            "userName": {
                "type": "String", //占位符类型
                "example": "小明" 
            }
        }
    }
}

然后重新Rebuild项目，项目会自动生成app_localizations.dart文件，使用方法 AppLocalizations.of(context).标识符 获得该标识对应的字符串。

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"), //引用多国语标识
         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)), //引用多国语标识
         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: "我的"),
         ]));
   }
   
   

其他相关多国语化参数描述，如下：

1. 字符串

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

   调用方式：AppLocalizations.of(context).hello("Jacket Chen")

2. 多个参数

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

   调用方式：AppLocalizations.of(context).greeting('Hello', 'World')

   3. 数字以及货币

   NumberFormat.compactLong("en_US").format(1200000) 该调用结果为：1.2million

   你可以使用类型为int或者double的占位符来表达同样的结果：

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

   调用方式：AppLocalizations.of(context).numberOfDataPoints(1200000)

   format对应的取值，如下：

   format的取值	numberOfDataPoints(1200000) 对应的输出结果
   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

   ：带星号的格式对应的取值有可选参数类型，如：optionalParameters*，他们的构造函数有可选参数。

   配置方式如下：

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

   当配置以上内容以后，numberOfDataPoints()的输出结果将会是：USD1.20M

   4. 日期

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

   在应用中，如果语言是英语(美国)，将输出表达式 7/10/1996 ; 如果语言是俄语，将输出表达式 10.07.1996 。
   调用方式：AppLocalizations.of(context).helloWorldOn(DateTime.utc(1996,7,10))

   5. 复数

   一般情况下，数字在不同数量下有不同的展示效果，在这里，要求数据类型必须是整型，而且要求数据必须大于等于0。在新的多国语化插件配置中，有以下多种可选配置。

   要表达的结果	表达式
   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}

   ：表达式开始必须声明变量以及使用plural*标识该表达式为复数表达式，如下案例：

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

   *：如果表达式中还会有其他表达式的值，则可以如下编写：

   "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”) 将返回与之前一样的字符串。