使用 Flutter 自动生成本地化代码实现多语言支持

本篇博客将介绍如何使用 Flutter 自动生成本地化代码来实现多语言支持。我们将使用 Flutter 1.22+ 版本的新特性，利用 flutter gen-l10n 命令自动根据 .arb 文件生成本地化代码。

第 1 步：添加依赖

在您的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

运行 flutter packages get 命令来安装这些依赖。

第 2 步：创建本地化配置文件

在项目根目录下，创建一个名为 l10n.yaml 的文件，并添加以下内容：

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

这个配置文件告诉 Flutter 本地化工具 .arb 文件的位置、模板文件名以及输出的本地化文件名。

第 3 步：创建 .arb 文件

在 lib/l10n 目录下，为每种支持的语言创建一个名为 <language_code>.arb 的文件。例如，对于英语（en）和中文（zh），分别创建 app_en.arb 和 app_zh.arb 文件。在这些文件中，定义相应的本地化字符串。

例如，app_en.arb 文件：

{
  "helloWorld": "Hello, World!",
  "navigateToPageTwo": "Navigate to Page Two",
  "pageTwoTitle": "Page Two",
  "welcomeToPageTwo": "Welcome to Page Two!"
}

app_zh.arb 文件：

{
  "helloWorld": "你好，世界！",
  "navigateToPageTwo": "导航至第二页",
  "pageTwoTitle": "第二页",
  "welcomeToPageTwo": "欢迎来到第二页！"
}

第 4 步：生成本地化文件

运行 flutter gen-l10n 命令，根据 .arb 文件生成相应的本地化文件。生成的文件将位于 lib/generated 目录下，并名为 app_localizations.dart。

第 5 步：配置 MaterialApp

在 lib/main.dart 文件中，为 MaterialApp 设置 localizationsDelegates 和 supportedLocales 属性：

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),

      // 设置本地化代理
      localizationsDelegates: AppLocalizations.localizationsDelegates,

      // 设置支持的语言列表
      supportedLocales: AppLocalizations.supportedLocales,
    );
  }
}

第 6 步：使用本地化字符串

在您的应用程序中，可以使用 AppLocalizations.of(context) 获取当前语言的本地化字符串。例如，在您的主页面上显示一个文本组件：

dartCopy code
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              AppLocalizations.of(context)!.helloWorld,
            ),
          ],
        ),
      ),
    );
  }
}

现在，当用户更改设备的语言设置时，您的应用程序将自动显示相应的本地化字符串。

结论

通过使用 Flutter 自动生成本地化代码，您可以更轻松地为您的应用程序添加多语言支持。只需创建和维护 .arb 文件，运行 flutter gen-l10n 命令，然后在 MaterialApp 中配置本地化设置。这样，您可以随时更新 .arb 文件并重新生成本地化代码以适应不断变化的需求。

请注意，本篇博客的教程适用于 Flutter 1.22+ 版本。如果您使用的是旧版本的 Flutter，您可能需要采用不同的方法来实现多语言支持。建议您更新到最新版本的 Flutter，以便利用新特性和改进。