首页 > 其他分享 >无涯教程-Flutter - 国际化

无涯教程-Flutter - 国际化

时间:2023-09-02 13:02:32浏览次数:63  
标签:教程 title locale 无涯 Flutter Locale CustomLocalizations message flutter

为了使应用程序能够以不同的语言运行,它首先应找到运行该应用程序的系统语言,然后需要在该特定语言环境中显示其内容,此过程称为"本地化"。

Flutter框架提供了三个用于本地化的基类和从基类派生的广泛的实用程序类,以对应用程序进行本地化。

基类如下-

  • Locale - 语言环境是用于识别用户语言的类。如,en-us标识美式英语,并且可以将其创建为。

Locale en_locale=Locale('en', 'US')

在这里,第一个参数是语言代码,第二个参数是国家代码,创建阿根廷西班牙语(es-ar)语言环境的另一个如下-

Locale es_locale=Locale('es', 'AR')
  • Localizations   -  本地化是一个通用 Widget,用于设置语言环境及其子部件的本地化资源。

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) { 
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations); 
   } 
   static Map<String, Map<String, String>> _resources = {
      'en': {
         'title': 'Demo', 
         'message': 'Hello World' 
      }, 
      'es': {
         'title': 'Manifestación', 
         'message': 'Hola Mundo', 
      }, 
   }; 
   String get title { 
      return _resources[locale.languageCode]['title']; 
   }
   String get message { 
      return _resources[locale.languageCode]['message']; 
   } 
}
  • CustomLocalizations             -  是一个新的自定义类,专门为获取 Widget的某些本地化内容而创建,of方法使用Localizations类返回新的CustomLocalizations类。

  • LocalizationsDelegate <T>   -  LocalizationsDelegate <T>是一个工厂类,通过该类可以加载Localizations小部件。它具有三种可替代的方法-

    • isSupported                              -  接受语言环境并返回是否支持指定的语言环境。

@override 
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

在此,仅在en和es语言环境中工作。

load  -  接受语言环境并开始为指定的语言环境加载资源。

@override 
Future<CustomLocalizations> load(Locale locale) { 
   return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale)); 
}

在这里,加载方法返回CustomLocalizations,返回的CustomLocalizations可用于获取英语和西班牙语的标题和消息的值

shouldReload - 指定在重建其Localizations Widget时是否需要重新加载CustomLocalizations。

@override 
bool shouldReload(CustomLocalizationsDelegate old) => false;
  • CustomLocalizationDelegate的完整代码如下-

class CustomLocalizationsDelegate extends 
LocalizationsDelegate<CustomLocalizations> { 
   const CustomLocalizationsDelegate(); 
   @override 
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
      return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) => false; 
}

通常,Flutter应用程序基于两个根级窗口 WidgetMaterialApp或WidgetsApp, Flutter为这两个 Widget都提供了现成的本地化,它们分别是MaterialLocalizations和WidgetsLocaliations,此外,Flutter还提供了加载MaterialLocalizations和WidgetsLocaliations的委托,它们分别是GlobalMaterialLocalizations.delegate和GlobalWidgetsLocalizations.delegate。

让无涯教程创建一个支持国际化的简单应用程序,以测试和理解该概念。

  • 创建一个新的flutter应用程序flutter_localization_app。

  • Flutter使用专有的flutter包flutter_localizations支持国际化,想法是将本地化的内容与主SDK分开。打开pubspec.yaml并添加以下代码以启用国际化包-

dependencies: 
   flutter: 
      sdk: flutter 
   flutter_localizations:
      sdk: flutter
  • Android Studio将显示以下警报,提示pubspec.yaml已更新。

Alert
  • 单击"Get dependencies"选项。 Android studio将从互联网上获取该软件包,并为应用程序正确配置它。

  • 按如下所示将main.dart中的flutter_localizations包导入-

import 'package:flutter_localizations/flutter_localizations.dart'; 
import 'package:flutter/foundation.dart' show SynchronousFuture;
  • 在这里,SynchronousFuture的目的是同步加载自定义本地化。

  • 创建自定义本地化及其对应的委托,如下所示-

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) {
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations); 
   }
   static Map<String, Map<String, String>> _resources = {
      'en': {
         'title': 'Demo', 
         'message': 'Hello World' 
      }, 
      'es': { 
         'title': 'Manifestación', 
         'message': 'Hola Mundo', 
      }, 
   }; 
   String get title { 
      return _resources[locale.languageCode]['title']; 
   } 
   String get message { 
      return _resources[locale.languageCode]['message']; 
   } 
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();
   
   @override 
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode); 
   
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
      return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale)); 
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) => false; 
}
  • 在这里,创建CustomLocalizations以支持应用程序中标题和消息的本地化,并且CustomLocalizationsDelegate用于加载CustomLocalizations。

  • 使用MaterialApp属性,localizationsDelegates和supportedLocales(如下所示)为MaterialApp,WidgetsApp和CustomLocalization添加委托-

localizationsDelegates: [
   const CustomLocalizationsDelegate(),   
   GlobalMaterialLocalizations.delegate, 
   GlobalWidgetsLocalizations.delegate, 
], 
supportedLocales: [
   const Locale('en', ''),
   const Locale('es', ''), 
],
  • 使用CustomLocalizations方法来获取标题和消息的本地化值,并在下面指定的适当位置使用它-

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(CustomLocalizations .of(context) .title), ), 
         body: Center(
            child: Column(
               mainAxisAlignment: MainAxisAlignment.center, 
               children: <Widget>[ 
                  Text( CustomLocalizations .of(context) .message, ), 
               ], 
            ), 
         ),
      );
   }
}
  • 在这里,出于简单原因,无涯教程将MyHomePage类从StatefulWidget修改为StatelessWidget,并使用CustomLocalizations获取标题和消息。

  • 应用程序的输出(西班牙语)显示在下面的屏幕图中-

Manifestacion

使用国际包

Flutter提供了国际软件包,以进一步简化本地化移动应用程序的开发,intl软件包提供了特殊的方法和工具来半自动生成特定于语言的消息。

让无涯教程使用intl包创建一个新的本地化应用程序,并理解其概念。

  • 创建一个新的flutter应用程序flutter_intl_app。

  • 打开pubspec.yaml并添加软件包详细信息。

dependencies: 
   flutter: 
      sdk: flutter 
   flutter_localizations: 
      sdk: flutter 
   intl: ^0.15.7 
   intl_translation: ^0.17.3
  • Android Studio将显示如下所示的警报,通知pubspec.yaml已更新。

Informing Updation
  • 单击"Get dependencies"选项。 Android studio将从互联网上获取该软件包,并为应用程序正确配置它。

  • 从上一个示例flutter_internationalization_app复制main.dart。

  • 如下所示导入国际包装-

import 'package:intl/intl.dart';
  • 更新CustomLocalization类,如下面的代码所示-

class CustomLocalizations { 
   static Future<CustomLocalizations> load(Locale locale) {
      final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString(); 
      final String localeName = Intl.canonicalizedLocale(name); 
      
      return initializeMessages(localeName).then((_) {
         Intl.defaultLocale = localeName; 
         return CustomLocalizations(); 
      }); 
   } 
   static CustomLocalizations of(BuildContext context) { 
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations); 
   } 
   String get title {
      return Intl.message( 
         'Demo', 
         name: 'title', 
         desc: 'Title for the Demo application', 
      ); 
   }
   String get message{
      return Intl.message(
         'Hello World', 
         name: 'message', 
         desc: 'Message for the Demo application', 
      ); 
   }
}
class CustomLocalizationsDelegate extends 
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();
   
   @override
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode); 
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
      return CustomLocalizations.load(locale); 
   } 
   @override 
   bool shouldReload(CustomLocalizationsDelegate old) => false; 
}
  • 在这里,无涯教程使用了intl包中的三种方法来代替自定义方法。否则,这些概念是相同的。

    •     - Intl.canonicalizedLocale - 用于获取正确的语言环境名称。

    •     - Intl.defaultLocale             - 用于设置当前语言环境

    •     - Intl.message                       -  用于定义新消息。

  • 导入 l10n/messages_all.dart 文件,无涯教程将很快生成该文件

import 'l10n/messages_all.dart';
  • 现在,创建一个文件夹lib/l10n

  • 打开命令提示符,然后转到应用程序根目录(可使用pubspec.yaml)并运行以下命令-

flutter packages pub run intl_translation:extract_to_arb --output-
   dir=lib/l10n lib/main.dart
  • 此处,该命令将生成intl_message.arb文件,该模板用于在不同的语言环境中创建消息。文件的内容如下-

{
   "@@last_modified": "2019-04-19T02:04:09.627551", 
   "title": "Demo", 
   "@title": {
      "description": "Title for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   }, 
   "message": "Hello World", 
   "@message": {
      "description": "Message for the Demo 
      application", 
      "type": "text", 
      "placeholders": {} 
   }
}
  • 复制intl_message.arb并创建新文件intl_en.arb。

  • 复制intl_message.arb并创建新文件intl_es.arb并将内容更改为西班牙语,如下所示-

{
   "@@last_modified": "2019-04-19T02:04:09.627551",  
   "title": "Manifestación", 
   "@title": {
      "description": "Title for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   },
   "message": "Hola Mundo",
   "@message": {
      "description": "Message for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   } 
}
  • 现在,运行以下命令以创建最终的消息文件messages_all.dart。

flutter packages pub run intl_translation:generate_from_arb 
--output-dir=lib\l10n --no-use-deferred-loading 
lib\main.dart lib\l10n\intl_en.arb lib\l10n\intl_es.arb
  • 编译并运行该应用程序。它将与上述应用程序flutter_localization_app相似。

参考链接

https://www.learnfk.com/flutter/flutter-internationalization.html

标签:教程,title,locale,无涯,Flutter,Locale,CustomLocalizations,message,flutter
From: https://blog.51cto.com/u_14033984/7331920

相关文章

  • Flink 1.17教程:任务槽Task Slots和并行度的关系
    任务槽TaskSlots在ApacheFlink中,任务槽(TaskSlots)是指可用于执行并行任务的资源单元。每个任务槽可以看作是一个可用的执行线程或处理单元,用于并行执行作业的不同部分。通俗来说,可以将任务槽想象成一个工作台,而每个工作台上都可以同时进行一项任务。任务槽的数量决定了同时可以......
  • Flink 1.17教程:Standalone会话模式运行时架构及并行度
    运行时架构——Standalone会话模式为例并行度并行度是指在计算过程中同时执行多个任务或操作的能力。在ApacheFlink中,并行度是指同时执行作业中的多个任务或算子的能力。并行度的引入是为了解决以下问题:提高计算速度:通过将任务拆分成多个子任务,并行执行它们,可以大大提高计算速度......
  • Flink 1.17教程:历史服务器History Server
    K8S运行模式容器化部署是如今业界流行的一项技术,基于Docker镜像运行能够让用户更加方便地对应用进行管理和运维。容器管理工具中最为流行的就是Kubernetes(k8s),而Flink也在最近的版本中支持了k8s部署模式。基本原理与YARN是类似的,具体配置可以参见官网说明,这里我们就不做过多讲解了......
  • Flink 1.17教程:并行度设置&优先级
    并行度设置&优先级并行度(Parallelism)并行度的设置在Flink中,可以用不同的方法来设置并行度,它们的有效范围和优先级别也是不同的。代码中设置我们在代码中,可以很简单地在算子后跟着调用setParallelism()方法,来设置当前算子的并行度:stream.map(word->Tuple2.of(word,1L)).setParall......
  • Flink 1.17教程:算子链Operator Chain
    算子链OperatorChain在ApacheFlink中,算子链(OperatorChaining)是将多个操作符(算子)连接在一起形成一个链式结构的优化技术。算子链的作用是将多个操作符合并为一个单一的任务单元,以减少通信开销、提高执行效率和减少资源占用。通俗来说,算子链的作用可以比喻为将多个操作合并成一......
  • Flink 1.17教程:Hadoop yarn会话运行模式
    YARN运行模式_环境准备YARN上部署的过程是:客户端把Flink应用提交给Yarn的ResourceManager,Yarn的ResourceManager会向Yarn的NodeManager申请容器。在这些容器上,Flink会部署JobManager和TaskManager的实例,从而启动集群。Flink会根据运行在JobManger上的作业所需要的Slot数量动态分配T......
  • Flink 1.17教程:部署模式介绍及Standalone运行模式
    部署模式介绍在一些应用场景中,对于集群资源分配和占用的方式,可能会有特定的需求。Flink为各种场景提供了不同的部署模式,主要有以下三种:会话模式(SessionMode)、单作业模式(Per-JobMode)、应用模式(ApplicationMode)。它们的区别主要在于:集群的生命周期以及资源的分配方式;以及应用的mai......
  • Flink 1.17教程:Hadoop yarn运行模式——单作业模式和应用模式
    YARN运行模式_单作业模式单作业模式部署(1)执行命令提交作业YARN运行模式_应用模式应用模式同样非常简单,与单作业模式类似,直接执行flinkrun-application命令即可。如:bin/flinkrun-application-tyarn-application-ccom.atguigu.wc.WordCountStreamUnboundedDemo./FlinkTutorial......
  • Flink 1.17教程:命令行提交作业jar
    命令行提交作业bin/flinkrun-mnode001:8081-ccom.atguigu.wc.WordCountStreamUnboundedDemo../jar/FlinkTutorial-1.17-1.0-SNAPSHOT.jar连接成功Lastlogin:FriJun1614:44:012023from192.168.10.1[atguigu@node001~]$cd/opt/module/flink/flink-1.17.0/[atgu......
  • Flink 1.17教程:集群搭建、运行模式(standalone/yarn/k8s)及历史服务器
    集群角色集群启动如果是部署在本地,本地访问,无需进行任何配置,直接启动即可。如果是部署在服务器,需要远程访问,则需要将flink.conf中的localhost修改为服务器IP地址或是0.0.0.0节点服务器hadoop102hadoop103hadoop104角色JobManagerTaskManagerTaskManagerTaskManager[atguigu@node001......