Flutter国际化翻译插件translate_intl的使用
Flutter国际化翻译插件translate_intl的使用
translate_intl
是一个 Flutter 包,它提供了处理应用程序中翻译和本地化的简单方法。它简化了管理不同语言并显示本地化内容的过程。
特性
- 本地化翻译:轻松管理和访问多种语言的翻译。
- 灵活的区域设置管理:动态设置和切换不同的区域设置。
- 易于翻译的扩展:在整个应用程序中使用简单的扩展来翻译字符串。
- 自定义本地化委托:使用自定义委托与 Flutter 的本地化系统集成。
开始使用
1. 添加依赖
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
translate_inl: ^0.1.0
2. 设置本地化
在 MaterialApp
中初始化本地化:
import 'package:flutter/material.dart';
import 'package:translate_intl/translate/translate_delegate.dart';
import 'package:translate_intl/translate/translator.dart';
import 'package:translate_intl/translate/translate_locale.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
supportedLocales: const [
Locale('en', 'EN'), // 英语
Locale('km', 'KH'), // 柬埔寨语
],
locale: const Locale('km'), // 初始区域设置为柬埔寨语
localizationsDelegates: [
TranslateDelegate(translator: Message()), // 使用 Message 类进行翻译
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
builder: (context, child) {
TranslateLocale.initialize(context); // 初始化本地化
return child!;
},
home: const MyPager(), // 主页面
);
}
}
3. 定义翻译
创建你的翻译文件,使用 Translator
类和 Localize
类:
class Message extends Translator {
[@override](/user/override)
Map<String, Map<String, String>> message() {
return {
'en': {'hello': 'Hello'}, // 英语
'km': {'hello': 'សួស្តី'}, // 柬埔寨语
};
}
}
4. 在小部件中使用翻译
在小部件中使用 .tr
扩展来翻译字符串:
class MyPager extends StatefulWidget {
const MyPager({super.key});
[@override](/user/override)
State<MyPager> createState() => _MyPagerState();
}
class _MyPagerState extends State<MyPager> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('hello'.tr), // 显示 "សួស្តី"
),
);
}
}
使用示例
以下是使用该包的一个快速示例:
import 'package:flutter/material.dart';
import 'package:translate_intl/translate/translate_delegate.dart';
import 'package:translate_intl/translate/translator.dart';
import 'package:translate_intl/translate/translate_locale.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
supportedLocales: const [
Locale('en', 'EN'), // 英语
Locale('km', 'KH'), // 柬埔寨语
],
locale: const Locale('km'), // 初始区域设置为柬埔寨语
localizationsDelegates: [
TranslateDelegate(translator: Message()), // 使用 Message 类进行翻译
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
builder: (context, child) {
TranslateLocale.initialize(context); // 初始化本地化
return child!;
},
home: const MyPager(), // 主页面
);
}
}
class MyPager extends StatefulWidget {
const MyPager({super.key});
[@override](/user/override)
State<MyPager> createState() => _MyPagerState();
}
class _MyPagerState extends State<MyPager> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('hello'.tr), // 显示 "សួស្តី"
),
);
}
}
更多关于Flutter国际化翻译插件translate_intl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter国际化翻译插件translate_intl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用translate_intl
插件来实现国际化的代码示例。
1. 添加依赖
首先,在pubspec.yaml
文件中添加translate_intl
的依赖:
dependencies:
flutter:
sdk: flutter
translate_intl: ^0.x.x # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 配置arb
文件
在lib/l10n
目录下创建语言文件,例如intl_en_US.arb
和intl_zh_CN.arb
。
intl_en_US.arb
内容示例:
{
"welcome_message": "Welcome to our app!",
"goodbye_message": "Goodbye!"
}
intl_zh_CN.arb
内容示例:
{
"welcome_message": "欢迎来到我们的应用!",
"goodbye_message": "再见!"
}
3. 生成本地化文件
在项目根目录下运行以下命令来生成本地化文件:
flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/main.dart lib/l10n/intl*.arb
4. 更新main.dart
在main.dart
中配置MaterialApp以支持本地化,并使用S.of(context)
来访问翻译字符串。
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_app_name/l10n/messages_all.dart'; // 确保导入的是生成的messages_all.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
localizationsDelegates: [
// 本地化的委托
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(S.of(context).welcome_message),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(S.of(context).welcome_message),
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Message'),
content: Text(S.of(context).goodbye_message),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('OK'),
),
],
),
);
},
child: Text('Show Message'),
),
],
),
),
);
}
}
5. 运行应用
确保你的设备或模拟器支持所配置的语言,然后在运行时通过系统设置更改语言,或者在应用内动态更改语言。
6. 动态更改语言(可选)
如果你想在应用内动态更改语言,可以创建一个方法来更新Localizations
:
void changeLanguage(BuildContext context, Locale newLocale) {
MyApp.of(context).setLocale(newLocale);
}
并在MyApp
类中管理Locale
:
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
static _MyAppState of(BuildContext context) {
return context.rootAncestorStateOfType(TypeMatcher<_MyAppState>());
}
}
class _MyAppState extends State<MyApp> {
Locale _locale;
@override
void initState() {
super.initState();
_locale = Locale('en', 'US'); // 默认语言
}
void setLocale(Locale locale) {
setState(() {
_locale = locale;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
localizationsDelegates: [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
locale: _locale,
home: MyHomePage(),
);
}
}
这样,你就可以通过调用changeLanguage
方法来动态更改应用的语言了。
希望这个示例能帮助你在Flutter项目中使用translate_intl
插件来实现国际化。