Flutter实现国际化（多语言）

在全球化趋势下应用支持多语言是非常重要的。Flutter 提供了强大的国际化i18n支持可以通过 flutter_localizations 与 gen-l10n 工具生成的本地化类来实现不同区域和语言的适配。本篇博客将介绍如何在 Flutter 项目中使用 flutter_localizations并实现多语言支持与动态切换。效果图1. 什么是国际化i18n和本地化l10n国际化i18n是指编写软件使其能够在不同的语言和文化环境中运行。它包含了将软件中的文本、日期、时间等元素抽象出来以便根据用户的区域设置进行翻译和显示。本地化l10n是国际化的具体应用步骤它包括将应用程序的语言、日期格式、货币符号等内容适配到特定地区。2. 配置在settings - plugins里下载intl插件需要在 pubspec.yaml 中添加依赖dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter在最底部加上flutter_intl: enabled: true运行 flutter pub get 下载依赖会自动生成文件,他默认生成一个英文的文件修改 MaterialApp 以支持国际化在 MaterialApp 中配置 localizationsDelegates 和 supportedLocales 以支持本地化。具体代码如下class MyApp extends StatefulWidget { override StateMyApp createState() _MyAppState(); } class _MyAppState extends StateMyApp { Locale _locale Locale(en); // 默认语言 void setLocale(Locale locale) { setState(() { _locale locale; }); } override Widget build(BuildContext context) { return MaterialApp( locale: _locale,// 设置当前的 Locale localizationsDelegates: const [ S.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale(en, US), //英文 Locale(zh, CN), //简体中文 Locale(zh, TW) //繁体中文 ], home: MyHomePage( onLocaleChange: (Locale locale) { setLocale(locale); }, ), ); } }3. 添加和生成语言文件intl 使用 .arb 文件来存储不同语言的翻译资源。接下来我们点击Tools - Flutter Intl - Add Local可以新增其他语言我们可以加上中文简体zh 和繁体zh_TW语言文件示例lib/l10n/intl_en.arb:{ content: china }lib/l10n/intl_zh.arb:{ content: 中国 }lib/l10n/intl_zh_TW.arb:{ content: 中國 }4.动态切换语言5.通过手机系统语言来显示对应语言的话6.完整示例代码:import package:flutter/material.dart; import package:flutter_localizations/flutter_localizations.dart; import generated/l10n.dart; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { override StateMyApp createState() _MyAppState(); } class _MyAppState extends StateMyApp { Locale _locale const Locale(en, US); // 默认语言 void setLocale(Locale locale) { setState(() { _locale locale; }); } override Widget build(BuildContext context) { return MaterialApp( locale: _locale, // 设置当前的 Locale localizationsDelegates: const [ S.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale(en, US), //英文 Locale(zh, CN), //简体中文 Locale(zh, TW), //繁体中文 Locale(zh, UG) //维语 ], //如果使用系统语言使用下面的 /*localeResolutionCallback: (locale, supportedLocales) { if (locale?.countryCode CN) {// 如果语言是简体 return const Locale(zh, CN); } else if (locale?.countryCode TW) {// 如果语言繁体 return const Locale(zh, TW); } else { return const Locale(en, US); } },*/ home: MyHomePage( onLocaleChange: (Locale locale) { setLocale(locale); }, ), ); } } class MyHomePage extends StatelessWidget { final Function(Locale) onLocaleChange; const MyHomePage({Key? key, required this.onLocaleChange}) : super(key: key); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(Flutter 国际化 Demo), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ //此处国际化文字 Text( S.current.content, style: const TextStyle( color: Colors.red, fontSize: 50, fontWeight: FontWeight.w700), ), changeButton(const Locale(zh, CN), 简体), changeButton(const Locale(zh, TW), 繁体), changeButton(const Locale(en, US), 英文), changeButton(const Locale(zh, UG), 维语), ], ), ), ); } Widget changeButton(Locale newLocale, String text) { return ElevatedButton( onPressed: () { onLocaleChange(newLocale); // 调用 MyAppState 的 setLocale 方法 }, child: Text(text), ); } }希望这篇文章对你了解 Flutter 国际化有所帮助