Flutter自带国际化适配自动生成方案剖析

2023-09-28 13:10:07

今天，我将向大家分享一种由Flutter提供的成熟国际化生成解决方案。通过巧妙利用这项功能，我们可以极大简化国际化流程，节省大量时间和精力。话不多说，让我们开始吧！

了解Flutter的国际化生成方案

Flutter的国际化生成方案旨在帮助开发者轻松管理应用中的多语言文本。它通过以下步骤实现这一目标：

创建l10n.yaml文件： 此文件指定了应用程序支持的语言列表以及语言代码。
编写arb文件： arb（应用程序资源包）文件包含所有需要翻译的文本。
生成本地化文件： Flutter提供了一个名为gen_l10n的工具，用于生成本地化文件（如.arb、.dart和.json）。
访问本地化文本： 应用程序可以通过Flutter提供的Localization类访问本地化文本。

配置l10n.yaml文件

l10n.yaml文件是Flutter国际化生成方案的核心。它定义了应用程序支持的语言，如下所示：

# l10n.yaml
arb-dir: lib/l10n
output-dir: lib/l10n/generated
template-arb-file: lib/l10n/app_en.arb

arb-dir： 指定arb文件的目录。
output-dir： 指定生成的本地化文件的目录。
template-arb-file： 指定用于生成其他arb文件的模板文件。

编写arb文件

arb文件以JSON格式存储需要翻译的文本，如下所示：

# app_en.arb
{
  "hello": "Hello, world!",
  "goodbye": "Goodbye, world!"
}

每个键代表一个需要翻译的文本字符串，对应的值是翻译后的文本。

生成本地化文件

使用gen_l10n工具可以生成本地化文件。在终端中执行以下命令：

flutter pub run intl_translation:gen_l10n

此命令将生成arb、dart和json文件，其中包含所有支持语言的本地化文本。

访问本地化文本

Flutter提供了Localization类，用于访问本地化文本。该类提供了多种方法来获取翻译后的文本，例如：

final localization = Localizations.of<AppLocalizations>(context, AppLocalizations);
String localizedText = localization.hello;

示例代码

以下示例展示了如何使用Flutter的国际化生成方案：

# l10n.yaml
arb-dir: lib/l10n
output-dir: lib/l10n/generated
template-arb-file: lib/l10n/app_en.arb

# app_en.arb
{
  "hello": "Hello, world!",
  "goodbye": "Goodbye, world!"
}

# main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', 'US'),
        Locale('es', 'ES'),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localization = Localizations.of<AppLocalizations>(context, AppLocalizations);
    return Scaffold(
      appBar: AppBar(
        title: Text(localization.hello),
      ),
      body: Center(
        child: Text(localization.goodbye),
      ),
    );
  }
}