Flutter for OpenHarmony 实战之基础组件：第五十篇 多语言适配与国际化 — 让应用走向全球

前言

随着鸿蒙生态在全球范围内的快速扩张，一款优秀的开发者应用必须具备“跨文化”的沟通能力。无论是在中国市场的简繁体切换，还是走向国际市场的多语言出海，国际化（i18n）与本地化（l10n）都是项目的标配。

在 Flutter for OpenHarmony 平台上，国际化不仅涉及文字翻译，还包含日期格式、货币单位以及鸿蒙系统语言偏好的自动识别。本文将手把手带大家跑通多语言适配流程，让你的应用能“听懂”全球用户的语言。

---

一、核心概念：l10n vs i18n

• i18n (Internationalization)：国际化。是技术层面的实现，让应用有支持多语言的架构。
• l10n (Localization)：本地化。是内容层面的翻译和适配（特定地区的文字、习俗等）。

---

二、配置多语言环境三部曲

2.1 引入依赖与开启配置

在 pubspec.yaml 中开启 generate 模式：

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true # 开启自动生成代码

2.2 定义 ARB 文件 (翻译源)

在 lib/l10n/ 目录下创建资源文件。

• app_zh.arb (中文):

  { "hello": "你好, 鸿蒙!" }
  

• app_en.arb (英文):

  { "hello": "Hello, OpenHarmony!" }
  

2.3 生成代码并初始化

运行 flutter gen-l10n，然后在 MaterialApp 中配置：

MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  home: const MyHomePage(),
)

---

三、实战：根据系统语言动态渲染

在页面中使用生成的翻译文本：

Text(AppLocalizations.of(context)!.hello)

---

四、OpenHarmony 平台适配建议

4.1 自动识别鸿蒙系统语言

鸿蒙系统（HarmonyOS）有一套完善的 Language 管理机制。

✅ 技术要点：
Flutter 的 Localizations 模块会自动读取鸿蒙端的底层 Locale 设置。当用户在鸿蒙端设置页更改了系统语言，应用无需重启即可自动触发 build 刷新文本。

4.2 处理 RTL 布局 (从右往左)

如果应用涉及到阿拉伯语等出海地区。

💡 调优建议：
在鸿蒙端设计布局时，优先使用 Directional 属性（如 padding: EdgeInsetsDirectional.only(start: 10) 替代 left）。这样当语言切换为 RTL 时，边距会自动左右反转，保证布局逻辑的正确性。

4.3 动态切换语言（App 内自由选）

有时用户希望系统是中文，但应用是英文。

✅ 最佳实践：
结合 provider 或 bloc 等状态管理工具，通过 MaterialApp 的 locale 属性手动控制。并在切换时同步持久化到 Shared Preferences。

MaterialApp(
  locale: myProvider.currentLocale, // 手动设置
  // ...
)

---

五、完整示例代码

以下代码演示了一个简单的多语言主页，包含中英文文字和日期本地化的实战。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
// 💡 导入自动生成的本地化库
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class LocalizationDemoPage extends StatefulWidget {
  const LocalizationDemoPage({super.key});

  @override
  State<LocalizationDemoPage> createState() => _LocalizationDemoPageState();
}

class _LocalizationDemoPageState extends State<LocalizationDemoPage> {
  // 💡 当前演示页面的 Locale 状态
  Locale _currentLocale = const Locale('zh');

  void _toggleLanguage() {
    setState(() {
      _currentLocale = _currentLocale.languageCode == 'zh'
          ? const Locale('en')
          : const Locale('zh');
    });
  }

  @override
  Widget build(BuildContext context) {
    // 💡 重点：使用 Localizations.override 来强制本页面及其子树使用指定的 Locale
    // 这样我们就能在不改变全局 App 状态的前提下，在演示页内部切换语言。
    return Localizations.override(
      context: context,
      locale: _currentLocale,
      // 💡 必须提供 delegates，否则在 override 作用域内可能找不到资源
      delegates: AppLocalizations.localizationsDelegates,
      child: Builder(builder: (context) {
        // 💡 此时获取到的 l10n 将会跟随 _currentLocale 自动变化
        final l10n = AppLocalizations.of(context)!;

        return Scaffold(
          appBar: AppBar(title: Text(l10n.title)),
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 40),
            child: Column(
              children: [
                // 💡 1. 文本本地化演示：直接通过 l10n 实例访问键名
                const Icon(Icons.language_rounded,
                    size: 80, color: Colors.blue),
                const SizedBox(height: 24),
                Text(l10n.welcome,
                    style: const TextStyle(
                        fontSize: 32, fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Text(l10n.desc,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 16, color: Colors.grey)),

                const SizedBox(height: 60),

                // 💡 2. 日期本地化演示
                const Divider(),
                const SizedBox(height: 24),
                const Text("本地化日期格式演示 (intl):",
                    style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                      color: Colors.blue.withOpacity(0.05),
                      borderRadius: BorderRadius.circular(12)),
                  child: Text(
                    DateFormat.yMMMMEEEEd(_currentLocale.languageCode)
                        .format(DateTime.now()),
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        color: Colors.blue, fontWeight: FontWeight.bold),
                  ),
                ),

                const Spacer(),

                // 💡 3. 手动切换功能
                SizedBox(
                  width: double.infinity,
                  height: 54,
                  child: ElevatedButton.icon(
                      onPressed: _toggleLanguage,
                      icon: const Icon(Icons.translate_rounded),
                      label: Text(l10n
                          .switchText)), // 💡 注意：switch 是 Dart 关键字，在 l10n 中会自动重命名或需特殊处理
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text("退出演示")),
              ],
            ),
          ),
        );
      }),
    );
  }
}

---

六、总结

在 Flutter for OpenHarmony 的全球化征程中，国际化不是负担，而是竞争力。

1. 工程化：通过 ARB 文件和自动代码生成（l10n-gen）让维护更具条理。
2. 全面性：不仅是文字，日期、数字格式、RTL 布局同样属于本地化的范畴。
3. 鸿蒙原生感：尊重用户的系统语言偏好，并提供灵活的 App 内切换选项，是打造鸿蒙平台精品应用的关键。

---

📦 完整代码已上传至 AtomGit：flutter_ohos_examples

🌐 欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区

---