美文网首页
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