Flutter多语言支持插件multilizely的使用

Flutter多语言支持插件multilizely的使用


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

1 回复

更多关于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项目中,按照以下步骤进行配置:

  1. 初始化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,
    );
  }
}
  1. 使用翻译文本

在你的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刷新,这里仅作为基本示例展示。

回到顶部