Flutter国际化与本地化插件getx_tr_maker的使用
Flutter国际化与本地化插件getx_tr_maker的使用
安装
在pubspec.yaml
文件中添加getx_tr_maker
依赖:
dev_dependencies:
...
getx_tr_maker:
开始使用
- 创建一个JSON文件,例如:
i18n/en-US.json
- 运行命令生成多语言文件:
flutter pub run getx_tr_maker i18n/en-US.json en-US "ko-KR,de-DE,gl-ES,gu-IN,el-GR,nl-NL,da-DK,lv-LV,ru-RU,ro-RO,lt-LT,mr-IN,mk-MK,ms-BN,ms-MY,mn-MN,eu-ES,vi-VN,be-BY,bg-BG,sr-Latn-CS,sw-KE,sv-SE,es-ES,sk-SK,sl-SI,ar-DZ,hy-AM,is-IS,ja-JP,zh-CN"
输出路径为lib/i18n.dart
。
输出示例
JSON 文件示例
{
"test" : "테스트"
}
Dart 文件示例
// lib/i18n.dart
import 'package:get/get.dart';
class Messages extends Translations {
[@override](/user/override)
Map<String, Map<String, String>> get keys => {
"ko-KR": {"test": "테스트"},
"en-US": {"test": "test"},
"de-DE": {"test": "Prüfung"},
"gl-ES": {"test": "Test."},
"gu-IN": {"test": "કસોટી"},
"el-GR": {"test": "δοκιμή"},
"nl-NL": {"test": "toets"},
"da-DK": {"test": "prøve"},
"lv-LV": {"test": "pārbaude"},
"ru-RU": {"test": "тестовое задание"},
"ro-RO": {"test": "Test"},
"lt-LT": {"test": "testas"},
"mr-IN": {"test": "चाचणी"},
"mk-MK": {"test": "Тест"},
"ms-BN": {"test": "ujian"},
"ms-MY": {"test": "ujian"},
"mn-MN": {"test": "туршилт"},
"eu-ES": {"test": "saiatu"},
"vi-VN": {"test": "kiểm tra"},
"be-BY": {"test": "выпрабаванне"},
"bg-BG": {"test": "тест"},
"sr-Latn-CS": {"test": "тест"},
"sw-KE": {"test": "Mtihani"},
"sv-SE": {"test": "testa"},
"es-ES": {"test": "prueba"},
"sk-SK": {"test": "skúška"},
"sl-SI": {"test": "TEST."},
"ar-DZ": {"test": "اختبار"},
"hy-AM": {"test": "փորձարկում"},
"is-IS": {"test": "próf"},
"ja-JP": {"test": "テスト"},
"zh-CN": {"test": "测试"}
};
}
如何在应用中使用
在你的Flutter应用中,你可以通过以下方式使用Messages
类来获取翻译后的字符串:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'i18n.dart'; // 导入生成的i18n文件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
translations: Messages(), // 使用Messages类作为翻译器
locale: Locale('en', 'US'), // 设置默认语言
fallbackLocale: Locale('en', 'US'), // 设置回退语言
);
}
}
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Get.text("test")), // 获取翻译后的字符串
),
body: Center(
child: Text(Get.text("test")),
),
);
}
}
更多关于Flutter国际化与本地化插件getx_tr_maker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter国际化与本地化插件getx_tr_maker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中,国际化(Internationalization,简称 i18n)和本地化(Localization,简称 l10n)是非常重要的功能,特别是在开发多语言应用时。getx_tr_maker
是一个基于 GetX
状态管理库的插件,可以帮助开发者快速生成和管理多语言资源文件。
1. 安装 getx_tr_maker
首先,你需要在 pubspec.yaml
文件中添加 getx_tr_maker
插件的依赖:
dependencies:
flutter:
sdk: flutter
get: ^4.6.5
getx_tr_maker: ^1.0.0
然后运行 flutter pub get
来安装依赖。
2. 创建多语言资源文件
接下来,你需要创建一个 JSON 文件来存储多语言资源。通常,你会在 assets
目录下创建一个 translations
文件夹,并在其中创建不同语言的 JSON 文件。
例如,创建一个 en.json
文件表示英文:
{
"hello": "Hello",
"welcome": "Welcome to Flutter"
}
再创建一个 zh.json
文件表示中文:
{
"hello": "你好",
"welcome": "欢迎来到 Flutter"
}
3. 配置 pubspec.yaml
在 pubspec.yaml
中配置这些资源文件:
flutter:
assets:
- assets/translations/en.json
- assets/translations/zh.json
4. 使用 getx_tr_maker
生成代码
getx_tr_maker
提供了一个命令来生成多语言资源的管理代码。在终端中运行以下命令:
flutter pub run getx_tr_maker:generate
这将会生成一个 tr.dart
文件,其中包含了多语言资源的管理代码。
5. 在应用中使用多语言
现在你可以在应用中使用生成的多语言资源了。首先,在 main.dart
中初始化 GetX
和 Translations
:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'generated/tr.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
translations: Translations(),
locale: Locale('en', 'US'), // 默认语言
fallbackLocale: Locale('en', 'US'), // 备用语言
home: HomePage(),
);
}
}
在 HomePage
中使用多语言资源:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'generated/tr.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hello'.tr),
),
body: Center(
child: Text('welcome'.tr),
),
);
}
}
6. 切换语言
你可以通过 Get.updateLocale
方法来动态切换语言:
Get.updateLocale(Locale('zh', 'CN'));