当前位置：首页 > news >正文

Flutter国际化与本地化完全指南

news 2026/5/24 23:32:12

Flutter国际化与本地化完全指南

引言

国际化是构建全球化应用的关键环节，Flutter提供了完善的国际化支持。本文将深入探讨Flutter中的国际化和本地化技术。

一、基础配置

1.1 添加依赖

dependencies: flutter_localizations: sdk: flutter intl: ^0.18.1

1.2 更新main.dart

import 'package:flutter_localizations/flutter_localizations.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en', ''), Locale('zh', 'CN'), Locale('ja', ''), ], home: const HomePage(), ); } }

二、创建本地化资源

2.1 创建arb文件

lib/l10n/app_en.arb

{ "@@locale": "en", "title": "Hello World", "welcome": "Welcome to our app!", "greeting": "Hello {name}!", "count": "{count, plural, zero{No items} one{One item} other{{count} items}}", "gender": "{gender, select, male{He} female{She} other{They}} likes this." }

lib/l10n/app_zh.arb

{ "@@locale": "zh", "title": "你好世界", "welcome": "欢迎来到我们的应用！", "greeting": "你好 {name}！", "count": "{count, plural, zero{没有项目} one{一个项目} other{{count}个项目}}", "gender": "{gender, select, male{他} female{她} other{他们}}喜欢这个。" }

lib/l10n/app_ja.arb

{ "@@locale": "ja", "title": "こんにちは世界", "welcome": "アプリへようこそ！", "greeting": "こんにちは {name}！", "count": "{count, plural, zero{アイテムがありません} one{アイテム1つ} other{アイテム{count}個}}", "gender": "{gender, select, male{彼は} female{彼女は} other{彼らは}}これが好きです。" }

2.2 配置pubspec.yaml

flutter: generate: true assets: - lib/l10n/

2.3 生成代码

flutter pub get

三、使用本地化字符串

3.1 基础使用

import 'package:flutter_gen/gen_l10n/app_localizations.dart'; class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { final loc = AppLocalizations.of(context)!; return Scaffold( appBar: AppBar(title: Text(loc.title)), body: Center( child: Column( children: [ Text(loc.welcome), Text(loc.greeting('John')), ], ), ), ); } }

3.2 复数处理

Text(loc.count(0)); // No items / 没有项目 / アイテムがありません Text(loc.count(1)); // One item / 一个项目 / アイテム1つ Text(loc.count(5)); // 5 items / 5个项目 / アイテム5個

3.3 性别选择

Text(loc.gender('male')); // He likes this. / 他喜欢这个。 / 彼はこれが好きです。 Text(loc.gender('female')); // She likes this. / 她喜欢这个。 / 彼女はこれが好きです。 Text(loc.gender('other')); // They like this. / 他们喜欢这个。 / 彼らはこれが好きです。

四、动态切换语言

4.1 创建语言提供器

class LocaleProvider extends ChangeNotifier { Locale _locale = const Locale('en'); Locale get locale => _locale; void setLocale(Locale locale) { _locale = locale; notifyListeners(); } }

4.2 使用Provider包装

void main() { runApp( ChangeNotifierProvider( create: (_) => LocaleProvider(), child: const MyApp(), ), ); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { final localeProvider = Provider.of<LocaleProvider>(context); return MaterialApp( locale: localeProvider.locale, localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en', ''), Locale('zh', 'CN'), Locale('ja', ''), ], home: const HomePage(), ); } }

4.3 创建语言选择器

class LanguageSelector extends StatelessWidget { const LanguageSelector({super.key}); @override Widget build(BuildContext context) { final localeProvider = Provider.of<LocaleProvider>(context); return DropdownButton<Locale>( value: localeProvider.locale, items: const [ DropdownMenuItem(value: Locale('en'), child: Text('English')), DropdownMenuItem(value: Locale('zh', 'CN'), child: Text('中文')), DropdownMenuItem(value: Locale('ja'), child: Text('日本語')), ], onChanged: (locale) { if (locale != null) { localeProvider.setLocale(locale); } }, ); } }

五、日期和数字本地化

5.1 日期格式化

import 'package:intl/intl.dart'; void formatDate() { final date = DateTime.now(); // 默认格式 print(DateFormat.yMMMd().format(date)); // 中文格式 print(DateFormat.yMMMd('zh_CN').format(date)); // 日文格式 print(DateFormat.yMMMd('ja').format(date)); // 自定义格式 print(DateFormat('yyyy-MM-dd HH:mm:ss').format(date)); }

5.2 数字格式化

void formatNumber() { final number = 1234567.89; // 默认格式 print(NumberFormat().format(number)); // 中文格式 print(NumberFormat.currency(locale: 'zh_CN').format(number)); // 百分比 print(NumberFormat.percentPattern().format(0.75)); }

六、RTL支持

6.1 配置RTL

MaterialApp( locale: const Locale('ar'), supportedLocales: const [ Locale('ar'), ], localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], home: const HomePage(), );

6.2 处理RTL布局

class RtlAwareWidget extends StatelessWidget { const RtlAwareWidget({super.key}); @override Widget build(BuildContext context) { final textDirection = Directionality.of(context); return Row( textDirection: textDirection, children: [ const Text('First'), const Text('Second'), ], ); } }

七、最佳实践

7.1 提取本地化键

// 不好 Text(AppLocalizations.of(context)!.title); // 好 extension AppLocalizationsExtension on BuildContext { AppLocalizations get loc => AppLocalizations.of(this)!; } // 使用 Text(context.loc.title);

7.2 处理缺失翻译

// 在arb文件中添加默认值 { "title": "Hello World", "@title": { "description": "The title of the app", "type": "text", "placeholders": {} } }

7.3 测试多语言

void main() { testWidgets('English locale', (tester) async { await tester.pumpWidget( MaterialApp( locale: const Locale('en'), localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], home: const HomePage(), ), ); expect(find.text('Hello World'), findsOneWidget); }); testWidgets('Chinese locale', (tester) async { await tester.pumpWidget( MaterialApp( locale: const Locale('zh', 'CN'), localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], home: const HomePage(), ), ); expect(find.text('你好世界'), findsOneWidget); }); }