flutter多语言本地化支持方法

在 Flutter 中，实现多语言支持的方式与 Android 原生开发（使用 values 目录和 strings.xml）有所不同。Flutter 提供了自己的多语言支持机制，通常使用 flutter_localizations 和 intl 包来实现。

以下是 Flutter 实现多语言支持的步骤：

---

1. 添加依赖

在 pubspec.yaml 中添加以下依赖：

yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 提供多语言支持
    sdk: flutter
  intl: ^0.17.0 # 用于格式化文本

运行 flutter pub get 安装依赖。

---

2. 创建多语言文件

在项目中创建一个目录（如 lib/l10n），用于存放多语言文件。每个语言对应一个 .arb 文件（Application Resource Bundle）。

例如：

• lib/l10n/app_en.arb（英文）
• lib/l10n/app_zh.arb（中文）
• lib/l10n/app_ja.arb（日文）

示例 app_en.arb

json

{
  "appTitle": "My App",
  "helloWorld": "Hello, World!"
}

示例 app_zh.arb

json

{
  "appTitle": "我的应用",
  "helloWorld": "你好，世界！"
}

示例 app_ja.arb

json

{
  "appTitle": "私のアプリ",
  "helloWorld": "こんにちは、世界！"
}

---

3. 生成多语言代码

使用 flutter gen-l10n 工具生成多语言代码。在 pubspec.yaml 中配置 flutter_gen：

yaml

flutter:
  generate: true
  l10n:
    arb-dir: lib/l10n
    output-dir: lib/l10n/generated
    supported-locales: [en, zh, ja]
    synthetic-package: false

运行以下命令生成代码：

bash

flutter gen-l10n

生成的代码会放在 lib/l10n/generated 目录中。

---

4. 配置 MaterialApp

在 MaterialApp 中配置多语言支持：

dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/generated/l10n.dart'; // 引入生成的多语言代码

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        S.delegate, // 使用生成的多语言代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales, // 支持的语言
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).appTitle), // 使用多语言文本
      ),
      body: Center(
        child: Text(S.of(context).helloWorld), // 使用多语言文本
      ),
    );
  }
}

---

5. 切换语言

如果需要动态切换语言，可以使用 Locale 和 setState：

dart

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = Locale('en'); // 默认语言

  void _changeLanguage(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: _locale, // 设置当前语言
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: MyHomePage(changeLanguage: _changeLanguage),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Function(Locale) changeLanguage;

  MyHomePage({required this.changeLanguage});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).appTitle),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(S.of(context).helloWorld),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('zh')),
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('en')),
              child: Text('Switch to English'),
            ),
          ],
        ),
      ),
    );
  }
}

---

6. 支持的语言列表

在 pubspec.yaml 中配置 supportedLocales，例如：

yaml

flutter:
  l10n:
    supported-locales: [en, zh, ja]

---

7. 总结

• Flutter 多语言支持：使用 flutter_localizations 和 intl 包，通过 .arb 文件管理多语言文本。
• 生成代码：使用 flutter gen-l10n 生成多语言代码。
• 动态切换语言：通过 Locale 和 setState 实现语言切换。

---

与 Android 原生开发的对比

• Android：使用 values 目录和 strings.xml 文件管理多语言。
• Flutter：使用 .arb 文件和 flutter_localizations 包管理多语言。