Flutter多语言支持插件multilizely的使用
Flutter多语言支持插件multilizely的使用
A Command Line Interface for working with Localizely in flutter projects that contain multiple l10n.yaml files.
关于 #
Localizely 是一个管理本地化的优秀服务。它提供了一个CLI工具,仅支持一个flutter/dart包,并且每个项目只能有一个l10n.yaml文件。在某些情况下,可能需要在一个项目中包含多个flutter/dart包。例如,为了将应用逻辑分割为层、功能或创建一个mono仓库。
Localizely CLI支持的项目结构示例:
项目/
pubspec.yaml
l10n.yaml
lib/
strings/
strings.dart
strings_en.arb
...
Multilizely CLI支持的项目结构示例:
项目/
pubspec.yaml
l10n.yaml
lib/
strings/
strings.dart
strings_en.arb
...
packages/
我的功能1/
pubspec.yaml
l10n.yaml
lib/
strings/
strings.dart
strings_en.arb
...
...
我的功能n/
pubspec.yaml
l10n.yaml
lib/
strings/
strings.dart
strings_en.arb
...
Multilizely 允许你上传和下载具有类似结构项目的翻译。不同包中的键不需要唯一。Multilizely 在上传时会在所有翻译键上添加包前缀和项目前缀(可选),并在下载时删除这些前缀。
开始 #
术语 #
- 本地化包 - 包含l10n.yaml文件的目录。
初始化 #
-
创建一个环境变量,包含你的个人API令牌 -
LOCALIZELY_TOKEN
。 -
安装最新的Multilizely版本作为全局包。
dart pub global activate multilizely
或者指定特定版本:
pub global activate multilizely 0.0.1
- 在项目的根目录下创建并配置一个
multilizely.yaml
文件。
# Localizely项目ID
localizely_project_id: 我的Localizely项目ID
# 项目键 - 项目名称或其他用于添加到项目中所有键的前缀(可选)
project_key: 我的项目键
# 支持的语言
locales:
en:
pt-BR:
# 本地化包列表
packages:
# 本地化包键 - 包名或其他用于添加到包中所有键的前缀
我的功能1:
# 相对于项目的包路径
path: packages/我的功能1
...
我的功能n:
path: packages/我的功能n
命令 #
初始化命令 #
将本地化包的所有翻译上传到Localizely。如果Localizely中已经存在相同的键,则此命令会用新值覆盖它们。
要指定应初始化哪个包,请传递multilizely.yaml
中的本地化包列表中的包键到--package, -p
参数。
multilizely init -p 我的功能1
更新命令 #
使用以下策略更新包的翻译:
- 上传来自包的模板arb文件(
l10n.yaml
中的template-arb-file
属性)中不存在于Localizely的新键及其翻译。 - 从Localizely下载并覆盖包的本地化键及其翻译到包中。存在于Localizely但不在包中存在的键不会被添加。
传递--generate, -g
参数以在包更新后立即运行flutter gen-l10n
。
multilizely update -p 我的功能1 -g
通用参数 #
--package, -p
- 包键。--all-packages
- 对所有包执行命令。在这种情况下无需传递项目键参数。--test
- 不上传文件到Localizely且不更新本地化包。只构建位于build/multilizely目录的结果arb文件。
在命令执行期间,Multilizely会执行一些操作,如合并arb文件或从Localizely下载和拆分它们。该过程会生成临时的arb文件,位于build/multilizely目录。这对于解决集成阶段或贡献期间的问题很有帮助。
欢迎贡献! #
Update命令的设计基于我们团队的开发流程,可能不适合你。如果是这样,可以通过创建UpdateCommandStrategy抽象或其他方式来抽象化地重构Update命令。你可以打开一个问题来描述你的想法或要解决的问题。
示例代码
import 'package:example/src/strings/strings.dart';
import 'package:flutter/material.dart';
import 'package:hello/hello.dart';
import 'package:world/world.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Builder(builder: (context) => Text(MainStrings.of(context).title)),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: const [
HelloText(),
WorldText(),
],
),
),
),
localizationsDelegates: const [
...MainStrings.localizationsDelegates,
...HelloStrings.localizationsDelegates,
...WorldStrings.localizationsDelegates,
],
);
}
}
更多关于Flutter多语言支持插件multilizely的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter多语言支持插件multilizely的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用multilizely
插件来实现多语言支持的代码示例。multilizely
是一个用于Flutter的多语言支持库,它简化了在不同语言之间切换的过程。
首先,确保你已经在pubspec.yaml
文件中添加了multilizely
依赖:
dependencies:
flutter:
sdk: flutter
multilizely: ^最新版本号 # 请替换为最新的版本号
然后,运行flutter pub get
来安装依赖。
接下来,你需要设置多语言资源文件。假设你有英语(en)和中文(zh)两种语言,你可以在项目的assets
文件夹下创建如下结构的文件:
assets/
locales/
en/
translation.json
zh/
translation.json
translation.json
文件的内容示例(英语):
{
"welcome_message": "Welcome to our app!",
"goodbye_message": "Goodbye!"
}
translation.json
文件的内容示例(中文):
{
"welcome_message": "欢迎来到我们的应用!",
"goodbye_message": "再见!"
}
然后,在你的Flutter项目中,按照以下步骤进行配置:
- 初始化
Multilizely
:
在你的主文件(通常是main.dart
)中,初始化Multilizely
并加载语言资源。
import 'package:flutter/material.dart';
import 'package:multilizely/multilizely.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化Multilizely
await Multilizely.load(
defaultLocale: Locale('en'), // 默认语言
supportedLocales: [Locale('en'), Locale('zh')], // 支持的语言列表
assetPath: 'assets/locales/', // 语言资源文件的路径
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Multi-language Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
localizationsDelegates: [
// 添加Multilizely的本地化委托
Multilizely.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: Multilizely.supportedLocales,
locale: Multilizely.currentLocale,
);
}
}
- 使用翻译文本:
在你的UI组件中,你可以使用Multilizely.tr
函数来获取翻译后的文本。
import 'package:flutter/material.dart';
import 'package:multilizely/multilizely.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Multilizely.tr(context, 'welcome_message')),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
Multilizely.tr(context, 'welcome_message'),
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 切换语言示例:切换到中文
Multilizely.setLocale(Locale('zh'));
// 刷新UI(这里使用了setState来强制刷新,但在实际项目中可能需要更好的状态管理方案)
setState(() {});
},
child: Text('Switch to Chinese'),
),
SizedBox(height: 20),
Text(
Multilizely.tr(context, 'goodbye_message'),
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
在这个示例中,我们创建了一个简单的Flutter应用,它包含了一个欢迎消息和一个按钮,点击按钮可以切换到中文。Multilizely.tr
函数用于获取当前语言环境下的翻译文本。
请注意,实际项目中可能需要更复杂的状态管理方案来处理语言切换后的UI刷新,这里仅作为基本示例展示。