如何在Flutter中本地化应用

⏱️约2分钟
分享:

如果您希望在全球范围内使用您的应用程序,则对应用程序进行本地化是一项重要的要求。 Flutter arb文件对应用进行本地化的简单方法。 本文将说明如何在Flutter本地化您的应用程序。 请注意,本文基于Flutter 2.0.1,因此,如果您使用的是旧版本,则本文中介绍的方法可能无法正常工作。

1.将依赖项添加到pubspec.yaml

将依赖项添加到pubspec.yaml

yaml
1dependencies:
2 flutter:
3 sdk: flutter
4 flutter_localizations:
5 sdk: flutter
6 intl: ^0.16.1

这些软件包对于本地化是必需的。

2.将generate标志添加到pubspec.yaml

yaml
1flutter:
2 generate: true

此标志使Flutter可以从本地化所需的arb AppLocalizations

3.创建l10n.yaml

yaml
1arb-dir: lib/l10n
2template-arb-file: app_en.arb
3output-localization-file: app_localizations.dart

该文件提供了自动生成AppLocalizations类时的配置。 arb-dir arb文件的目录。 template-arb-file指定用作模板arb output-localization-file AppLocalizations类文件的名称。

4.创建arb文件

在l10n.yaml中指定的目录中创建arb arb文件是json格式,您可以为每个键提供翻译。 凯被称为resource id ,值被称为resource value 。 例如,以下示例为resource id helloWorld提供了英语翻译。

json
1{
2 "helloWorld": "Hello World!",
3 "@helloWorld": {
4 "description": "The conventional newborn programmer greeting"
5 }
6}

您可以通过在resource id添加@前缀来提供对resource id的详细说明。在上面的示例中, @helloWorld resource id helloWorld的详细信息。 然后,您可以根据您的应用支持的语言arb 例如,如果您支持日语,则可以添加如下所示的app_ja.arb

json
1{
2 "helloWorld": "こんにちは世界!"
3}

arb文件提供了各种有用的表达式,在这里我将介绍其中之一, placeholderPlaceholder使您可以将参数传递给resource value

json
1"pricePerMonth": "{price} per month",
2"@pricePerMonth": {
3 "placeholders": {
4 "price": {
5 "example": "123.45",
6 "description": "price"
7 }
8 }
9}

resource value传递任何参数,例如{price}@resource id下的placeholders编写参数的描述。 创建placeholder并自动生成AppLocalizations类后,您可以从您的应用中调用它,如下所示。

dart
1AppLocalizations.of(context).pricePerMonth(100.0);

5.自动创建AppLocalizations类文件

如果您调用flutter pub get或构建您的应用程序,则将自动生成AppLocalizations文件名在l10n.yaml中指定。 在这种情况下,文件将是.dart_tool/flutter_gen/gen_l10n/app_localizations.dart 。该目录由系统确定。

顺便说一句,您不需要将此文件提交到git。当您构建应用并反映最新的arb文件内容时,始终会生成此文件。

6.调用Material / Widget / CupertinoApp

设置localizationsDelegatessupportedLocales参数。 不要忘记导入AppLocalizations类。

dart
1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2
3@override
4Widget build(BuildContext context) {
5 return MaterialApp(
6 localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
7 supportedLocales: AppLocalizations.supportedLocales, // Add this line
8 home: // ...
9 );
10}

7.呼叫翻译后的文字

您可以像下面的示例一样使用本地化的文本。 语法类似于AppLocalizations.of(context).<resource id>

dart
1Text(AppLocalizations.of(context).helloWorld);

日期的本地化

您还可以显示本地化的日期,如下所示。

dart
1Locale locale = Localizations.localeOf(context);
2DateFormat.yMd(locale.toString()).format(DateTime.now());

参考

分享:

相关文章

带有Flutter Android应用程序CI/CD
Guides

带有Flutter Android应用程序CI/CD

了解如何使用Flutter构建Android应用的CI/CD pipeline。基于GitHub Actions,不使用fastlane。

mark241
将Azure资源描述为ARM Template
Guides

将Azure资源描述为ARM Template

ARM Template是定义Azure资源的json文件。本文介绍如何高效创建ARM Template来部署新资源。

mark241