flutter 国际化(语言地区本地化)使用flutter_i18n 使用intl包 Localizations widget

Flutter国际化的一些用法,包括Localization widget,intl包和flutter_i18n包的用法

在默认情况下,Flutter只支持英文,要添加多国语言支持,需要在pubspec.yaml文件中添加依赖 

1.使用flutter_i18n(插件安装参考:https://www.cnblogs.com/gaozhang12345/p/12082436.html)

主要是利用json文件来进行翻译,个人认为最简单的一种,可以自己定app语言,方便刷新切换语言,不依赖系统语言

在pubspec.yaml文件中添加依赖

dependencies:
  flutter:
    sdk: flutter
  flutter_i18n: ^0.8.2
flutter:
  assets:
  - flutter_i18n/  

如图:

 

 

新建json文件(assrts下新建的文件夹i18n,在新建文件命名为”en,json“,新建命名为”zh.json“,手动建不会自动生成的)

 

 

命名规则可以这样{languageCode}_{countryCode}.json(语言类型_国家.json)或者{languageCode}.json(语言.json),这里我命名为zh.json,内容如下:

{
"title": "测试应用",
"label": {
"main": "哈罗!老子"
},
"button": {
"clickMe": "点击这里"
},
"toastMessage": "您点击了按钮!",
"clicked": {
"times-0": "您点击ll了{times}次!",
"times-1": "您点击kk了{time}次!",
"times-2": "您点击hh了{times}次!"
}
}

en.json内容如下:

{
"title": "Test app",
"label": {
"main": "Hello {user}!"
},
"button": {
"clickMe": "Click here"
},
"toastMessage": "You clicked on button!",
"clicked": {
"times-0": "You clicked ll{times} times!",
"times-1": "You clicked kk{time} time!",
"times-2": "You clicked hh{times} times!"
}
}

mart.dart内容如下:

import 'package:flutter/material.dart';
import 'package:flutter_i18n/flutter_i18n.dart';
import 'package:flutter_i18n/flutter_i18n_delegate.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
      localizationsDelegates: [
        FlutterI18nDelegate(
            useCountryCode: false, fallbackFile: 'en', path: 'assets/i18n'),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomeState createState() => new MyHomeState();
}

class MyHomeState extends State<MyHomePage> {
  Locale currentLang;
  int clicked = 0;

  @override
  void initState() {
    super.initState();
    new Future.delayed(Duration.zero, () async {
      await FlutterI18n.refresh(context, new Locale('es'));
      setState(() {
        currentLang = FlutterI18n.currentLocale(context);
      });
    });
  }

  changeLanguage() {
    setState(() {
      currentLang = currentLang.languageCode == 'en'
          ? new Locale('en')
          : new Locale('zh');
    });
  }

  incrementCounter() {
    setState(() {
      clicked++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar:
      new AppBar(title: new Text(FlutterI18n.translate(context, "title"))),
      body: new Builder(builder: (BuildContext context) {
        return new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(FlutterI18n.translate(context, "label.main",
                  Map.fromIterables(["user"], ["Flutter lover"]))),
              new Text(FlutterI18n.plural(context, "clicked.times", clicked)),
              new FlatButton(
                  onPressed: () async {
                    incrementCounter();
                  },
                  child: new Text(
                      FlutterI18n.translate(context, "button.clickMe"))),
              new FlatButton(
                  onPressed: () async {
                    changeLanguage();
                    await FlutterI18n.refresh(context, currentLang);
                    Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text(
                          FlutterI18n.translate(context, "toastMessage")),
                    ));
                  },
                  child: new Text(
                      FlutterI18n.translate(context, "button.clickMe")))
            ],
          ),
        );
      }),
    );
  }
}

运行点击下面的"Premi qui",就可以观察到文字马上做了本地化翻译(这里方便观察),使用的时候直接用点击后的效果,查看就系统切换语言即可。

2.使用intl包

posted on 2019-12-31 17:47  高彰  阅读(3046)  评论(0编辑  收藏  举报

导航