Flutter 如何在应用中实现多语言?

40 min read

Flutter 提供了一种称为 "国际化 (i18n)" 的机制,它使应用程序可以轻松实现多语言支持。以下是实现多语言的步骤:

  1. 在应用程序目录中创建一个名为 l10n 的目录。l10n 代表 "localization",即本地化。这个目录用于存储语言资源文件。

  2. l10n 目录中创建子目录并将其命名为语言代码,如 en 表示英语,zh 表示中文。在每个子目录下,都必须创建一个名为 arb 的文件夹。arb 代表 "Application Resource Bundle",即应用程序资源包。

  3. arb 目录中创建一个名为 <languageCode>.arb 的文件,<languageCode> 是该文件所代表的语言的代码。例如,对于英语,文件名为 en.arb

  4. arb 文件中,定义应用程序中需要本地化的文本。每个文本字符串都有一个唯一的 ID 和一个翻译。

  5. pubspec.yaml 文件中添加 flutter_localizationsintl 依赖。flutter_localizations 依赖提供了 Flutter 国际化的支持,而 intl 插件提供了国际化工具。

  6. main.dart 中,添加以下代码:

import 'package:flutter_localizations/flutter_localizations.dart';

// 在 MaterialApp 的 localizationsDelegates 参数中添加 GlobalMaterialLocalizations 和 GlobalWidgetsLocalizations
MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    MyAppLocalizationsDelegate.delegate,
  ],
  supportedLocales: [
    const Locale('en', 'US'),
    const Locale('zh', 'CN'),
  ],
  // 其他配置
);
  1. 创建一个 MyAppLocalizations 类,该类实现 LocalizationsDelegate 接口并负责加载应用中所需的所有本地化资源。
class MyAppLocalizations {
  static MyAppLocalizations of(BuildContext context) {
    return Localizations.of<MyAppLocalizations>(context, MyAppLocalizations);
  }

  final String title;

  MyAppLocalizations({
    @required this.title,
  });
}

class MyAppLocalizationsDelegate extends LocalizationsDelegate<MyAppLocalizations> {
  static MyAppLocalizationsDelegate delegate = MyAppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

  @override
  Future<MyAppLocalizations> load(Locale locale) async {
    final String name = (locale.countryCode == null || locale.countryCode.isEmpty) ? locale.languageCode : locale.toString();
    final String json = await rootBundle.loadString('l10n/${locale.languageCode}/$name.arb');
    final Map<String, dynamic> data = jsonDecode(json);

    return MyAppLocalizations(
      title: data['title'],
    );
  }

  @override
  bool shouldReload(MyAppLocalizationsDelegate old) => false;
}
  1. 在代码中,使用 MyAppLocalizations.of(context) 来获取本地化的文本。例如:
Text(MyAppLocalizations.of(context).title),

这就是使用 Flutter 实现多语言的步骤。请注意,以上仅为简单示例,实际的应用场景可能更加复杂。