以$t形式使用flutter多语言

前言

关于flutter国际化的具体介绍，大家可以移步国际化Flutter App

本文主要介绍在flutter如何使用多语言并且如何像web使用i18n一样使用多语言（$t）和实现语言切换,这对前端开发人员会更加友好。

项目地址

flutter-ui, 这是包含flutter组件介绍的开源项目，欢迎star

flutter_intl 本教程的项目源码，欢迎star

效果

如何使用

添加依赖

• 在pubspec.yaml中引入依赖

dependencies:
  flutter_localizations:
    sdk: flutter
复制代码

• 执行

flutter packages get
复制代码

新建文件locale

locale
    |-en.json
    |-zh.json
复制代码

多语言的文件

• en.json

{
    "title_page": "i18n",
    "title_appbar": "i18n",
    "content": {
        "currentLanguage": "The current language is English",
        "zh": "zh",
        "en": "en"
    }
}
复制代码

• zh.json

{
    "title_page": "国际化例子",
    "title_appbar": "国际化例子",
    "content": {
        "currentLanguage": "当前语言是中文",
        "zh": "中文",
        "en": "英文"
    }
}
复制代码

lib下新建lang

lang
  |- config.dart
  |- index.dart
复制代码

• config.dart

import 'package:flutter/material.dart';

class ConfigLanguage {
  static List<Locale> supportedLocales = [
    Locale('zh', 'CH'),
    Locale('en', 'US')
  ];

  static Map<String, dynamic> supportLanguage = {
    "zh": {"code": "zh", "country_code": "CH"},
    "en": {"code": "en", "country_code": "US"},
  };

  static dynamic defaultLanguage = {
    "code": "zh",
    "country_code": "CH"
  };
}
复制代码

config.dart作用主要是将配置性的内容统一到一个文件中

• index.dart

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter/foundation.dart' show SynchronousFuture;
import 'package:flutter_intl/lang/config.dart' as I18NConfig;
class AppLocalizations {
  Locale _locale;
  static Map<String, dynamic> jsonLanguage; // 语言包
  static AppLocalizations _inst; // inst

  AppLocalizations(this._locale);

  // 初始化 localizations
  static Future<AppLocalizations> init(Locale locale) async {
    _inst = AppLocalizations(locale);
    await getLanguageJson();
    return _inst;
  }

  // 获取语言包
  static Future getLanguageJson() async {
    Locale _tmpLocale = _inst._locale;
    print('获取语言包的语种; ${_tmpLocale.languageCode}');
    String jsonLang;
    try {
      jsonLang = await rootBundle.loadString('locale/${_tmpLocale.languageCode}.json');
    } catch (e) {
      print('出错了');
      _inst._locale = Locale(I18NConfig.ConfigLanguage.defaultLanguage['code']);
      jsonLang = await rootBundle.loadString('locale/${I18NConfig.ConfigLanguage.defaultLanguage['code']}.json');
    }
    jsonLanguage = json.decode(jsonLang);
    print("当前语言： ${_inst._locale}");
    print("数据： $jsonLanguage");
  }

// $t 封装，目的是为了可以使用$t来获取多语言数据
  static String $t(String key) {
    var _array = key.split('.');
    var _dict = jsonLanguage;
    var retValue = '';
    try {
      _array.forEach((item) {
        if(_dict[item].runtimeType == Null) {
          retValue = key;
          return;
        }
        if (_dict[item].runtimeType != String) {
          _dict = _dict[item];
        } else {
          retValue = _dict[item];
        }
      });
      retValue = retValue.isEmpty ? _dict : retValue;
    } catch (e) {
      print('i18n exception');
      print(e);
      retValue = key;
    }

    return retValue ?? '';
  }

}


// 实现LocalizationsDelegate协议，用于初始化Localizations类
class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  final Locale locale;
  AppLocalizationsDelegate([this.locale]);

  @override
  bool isSupported(Locale locale) {
    return I18NConfig.ConfigLanguage.supportLanguage.keys
      .toList()
      .contains(locale.languageCode);
  }

// 在这里初始化Localizations类
  @override
  Future<AppLocalizations> load(Locale _locale) async {
    print('将要加载的语言: $_locale');
    return await AppLocalizations.init(_locale);
    // return SynchronousFuture<AppLocalizations>(
    //   AppLocalizations(_locale)
    // );
  }

  @override
  bool shouldReload(LocalizationsDelegate<AppLocalizations> old) {
    // flase时，不执行上述重写函数
    return false;
  }
}
复制代码

详情请看代码注释~~~~~~~~~

概况一下就是

实现一个LocalizationsDelegate协议和实现一个Localizations类，然后引入到main.dart中的MaterialApp中

处理main.dart文件

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_intl/lang/index.dart'
  show AppLocalizations, AppLocalizationsDelegate;
import 'package:flutter_intl/lang/config.dart' show ConfigLanguage;


void main () => runApp(MainApp());
GlobalKey<_ChangeLocalizationsState> changeLocalizationsStateKey = new GlobalKey<_ChangeLocalizationsState>();
class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  // 定义全局 语言代理
  AppLocalizationsDelegate _delegate;

  @override
  void initState() {
    // TODO: implement initState
    _delegate = AppLocalizationsDelegate();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // locale: Locale('zh', 'CH'),
      localeResolutionCallback: (deviceLocale, supportedLocal) {
        print('当前设备语种 deviceLocale: $deviceLocale, 支持语种 supportedLocale: $supportedLocal}');
        // 判断传入语言是否支持
        Locale _locale = supportedLocal.contains(deviceLocale) ? deviceLocale : Locale('zh', 'CN');
        return _locale;
      },
      onGenerateTitle: (context) {
        // 设置多语言代理
        // AppLocalizations.setProxy(setState, _delegate);
        return AppLocalizations.$t('title_page');
      },
      // localizationsDelegates 列表中的元素时生成本地化集合的工厂
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,   // 为Material Components库提供本地化的字符串和其他值
        GlobalWidgetsLocalizations.delegate,    // 定义widget默认的文本方向，从左往右或从右往左
        _delegate
      ],
      supportedLocales: ConfigLanguage.supportedLocales,
      initialRoute: '/',
      routes: {
        '/': (context) => 
        // Home()
        Builder(builder: (context) {
          return ChangeLocalizations(
            key: changeLocalizationsStateKey,
            child: Home()
          );
        })
      }
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Locale locale = Localizations.localeOf(context);
    return Scaffold(
      appBar: AppBar(title: Text('${AppLocalizations.$t('title_appbar')}'),),
      body: ListView(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 60),
            alignment: Alignment.center,
            child: Text('${locale.languageCode} ${locale.toString()}'),
          ),
          Container(
            alignment: Alignment.center,
            child: Text('${AppLocalizations.$t('content.currentLanguage')}'),
          ),
          Wrap(
            spacing: 8.0,
            alignment: WrapAlignment.center,
            children: <Widget>[
              ActionChip(
                backgroundColor: Theme.of(context).primaryColor,
                onPressed: () {
                  changeLocalizationsStateKey.currentState.changeLocale(Locale('en', 'US'));
                },
                label: Text('${AppLocalizations.$t('content.en')}'),
              ),
              ActionChip(
                backgroundColor: Theme.of(context).primaryColor,
                onPressed: () {
                  changeLocalizationsStateKey.currentState.changeLocale(Locale('zh', 'CH'));
                },
                label: Text('${AppLocalizations.$t('content.zh')}'),
              )
            ],
          )
        ],
      )
    );
  }
}

class ChangeLocalizations extends StatefulWidget {
  final Widget child;
  ChangeLocalizations({Key key, this.child}):super(key: key);
  @override
  _ChangeLocalizationsState createState() => _ChangeLocalizationsState();
}

class _ChangeLocalizationsState extends State<ChangeLocalizations> {
  Locale _locale;
  @override
  void initState() {
    super.initState();
  }
  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    // 获取当前设备的语言
    _locale = Localizations.localeOf(context);
    print('设备语言: $_locale');
  }
  changeLocale(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Localizations.override(
      context: context,
      locale: _locale,
      child: widget.child,
    );
  }
}
复制代码

• 在MaterialApp中指定localizationsDelegate和supportedLocales
  • localeResolutionCallback：在应用获取用户设置的语言区域时回调，可以根据需要return对应的Locale
  • onGenerateTitle： 返回对应的多语言应用标题
  • localizationsDelegates：localizationsDelegates 列表中的元素时生成本地化集合的工厂
  • supportedLocales: app支持的语言种类
• Home类就是显示的类
  • Localizations.localeOf(context).languageCode可以获取当前app的语言类型
  • AppLocalizations.$t('content.currentLanguage')像web一样玩耍多语言内容

到这里就已经可以愉快的玩耍多语言了，用户设置不同的语言就会加载不同的语言包

下面实现在app内的语言切换

• ChangeLocalizations类使用Localizations的override方法，代码如上
  • 使用GlobalKey调用ChangeLocalizations的内部方法，GlobalKey<_ChangeLocalizationsState> changeLocalizationsStateKey = new GlobalKey<_ChangeLocalizationsState>(); 我们也可以将GlobalKey放入到provide中，这样可以实现多个页面进行changeLocalizationsStateKey的访问
  • 修改语言调用changeLocale方法，changeLocalizationsStateKey.currentState.changeLocale(Locale('en', 'US'));

最后

欢迎更多学习flutter的小伙伴加入QQ群 Flutter UI： 798874340

敬请关注我们正在开发的: efoxTeam/futter-ui

作者

转载于:https://juejin.im/post/5cdb8adee51d453acc60162c