zoukankan      html  css  js  c++  java
  • 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包

  • 相关阅读:
    二分查找算法
    js 分享QQ、QQ空间、微信、微博
    linux安装redis
    redis linux开机启动 (简单高效)
    js 自定义阻止事件冒泡函数
    js常见删除绑定的事件
    js自定义方法绑定元素事件
    js 中 attachEvent 简示例
    idea无法正常显示jsp页面
    get请求的时候特殊符号的注意事项
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/12071939.html
Copyright © 2011-2022 走看看