美文网首页
Flutter国际化的三种方式-->intl

Flutter国际化的三种方式-->intl

作者: 谢尔顿 | 来源:发表于2019-08-26 12:02 被阅读0次

1.添加依赖

2. localizations.dart

首先需要创建一个localizations.dart文件用来实现Localizations和Delegate类,如下所示:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test_demo/constant.dart';
import 'package:flutter_test_demo/i18n/messages_all.dart';
import 'package:intl/intl.dart';

class MyLocalizations {
  static Future<MyLocalizations> load(Locale locale) {
    final String name =
    locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((bool _) {
      Intl.defaultLocale = localeName;
      return new MyLocalizations();
    });
  }

  static MyLocalizations of(BuildContext context) {
    return Localizations.of<MyLocalizations>(context, MyLocalizations);
  }

  greetTo(name) => Intl.message("Nice to meet you, $name!",
      name: 'greetTo', desc: 'The application title', args: [name]);

  String get hello {
    return Intl.message('Hello!', name: 'hello');
  }
}

class MyLocalizationsDelegate extends LocalizationsDelegate<MyLocalizations> {
  const MyLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return languages.contains(locale.languageCode);
  }

  @override
  Future<MyLocalizations> load(Locale locale) {
    return MyLocalizations.load(locale);
  }

  @override
  bool shouldReload(LocalizationsDelegate<MyLocalizations> old) {
    return false;
  }
}

3.生成arb文件

在项目根目录下创建空目录asstes/i18n-arb,在terminal中执行下面的命令:

 flutter packages  pub run intl_translation:extract_to_arb --output-dir=assets/i18n-arb lib/i18n/localizations.dart

执行完成之后assets/i18n-arb目录下会有一个intl_messags.arb的文件,
基于该文件生成我们想只吃的语言对应的arb文件,如下图所示:


可以删除掉自动生成的intl_messages.arb文件

4.根据arb生成dart文件

在terminal中执行下面的命令:

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/i18n --no-use-deferred-loading lib/i18n/localizations.dart assets/i18n-arb/intl_*.arb

如下图所示:


红框中的文件都是根据命令自动生成的。

5.在main中使用

最后我们在main.dart中将所有的部分连接起来,如下所示:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_test_demo/i18n/localizations.dart';

import 'constant.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _locale = 'zh';
  onChangeLanguage() {
    if (_locale == 'en') {
      setState(() {
        _locale = 'zh';
      });
    } else {
      setState(() {
        _locale = 'en';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        locale: Locale(_locale, ""),
        localizationsDelegates: [
          MyLocalizationsDelegate(),
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate
        ],
        supportedLocales: languages.map((language) => Locale(language, '')),
        home: MyHomePage(this.onChangeLanguage));
  }
}

class MyHomePage extends StatelessWidget {
  final VoidCallback onChangeLanguage;
  MyHomePage(this.onChangeLanguage);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(MyLocalizations.of(context).hello),
        ),
        body: new Center(
          child: new Text(MyLocalizations.of(context).greetTo('Nina')),
        ),
        floatingActionButton: new FloatingActionButton(
            child: new Icon(Icons.language), onPressed: onChangeLanguage));
  }
}

其实main中的代码,和Flutter国际化的三种实现方法-json中的一样。

使用该方法时,如果我们有需要国际化的属性,在localizations中添加,然后利用命令生成即可。

相关文章

网友评论

      本文标题:Flutter国际化的三种方式-->intl

      本文链接:https://www.haomeiwen.com/subject/lsqrectx.html