Flutter自动化资源生成插件arb_generator的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter自动化资源生成插件arb_generator的使用

arb_generator 是一个 Dart 工具,可以从 CSV 文件生成 ARB 文件。这在进行 Flutter 应用的国际化时非常有用。

Getting Started

假设你有一个如下的 CSV 文件:

keys description en de
myKey The conventional newborn programmer greeting Hello world! Hallo Welt!
welcome A welcome message Welcome {firstName}! Willkommen {firstName}!
numberMessages An info message about new messages count {count, plural, zero{You have no new messages} one{You have 1 new message} other{You have {count} new messages}} {count, plural, zero{Du hast keine neue Nachrichten} one{Du hast eine neue Nachricht} other{Du hast {count} neue Nachrichten}}
whoseBook A message determine whose book it is {sex, select, male{His book} female{Her book} other{Their book}} {sex, select, male{Sein Buch} female{Ihr Buch} other{Ihr Buch}}

该 CSV 文件会被生成为以下的 ARB 文件:

{
  "@@locale": "en",
  "myKey": "Hello world!",
  "@myKey": {
    "description": "The conventional newborn programmer greeting"
  },
  "welcome": "Welcome {firstName}!",
  "@welcome": {
    "description": "A welcome message"
  },
  "numberMessages": "{count, plural, zero{You have no new messages} one{You have 1 new message} other{You have {count} new messages}}",
  "@numberMessages": {
    "description": "An info message about new messages count"
  },
  "whoseBook": "{sex, select, male{His book} female{Her book} other{Their book}}",
  "@whoseBook": {
    "description": "A message determine whose book it is"
  }
}

这个 ARB 文件可以使用 intlintl_utils 转换为本地化代理。

Add Dependency

首先,在 pubspec.yaml 文件中添加 arb_generator 作为开发依赖:

dev_dependencies: 
  arb_generator:

Define Settings

接下来在 pubspec.yaml 中定义 arb_generator 的设置。注意 input_filepath 是唯一必需的参数:

arb_generator:
  input_filepath: "assets_dev/test.csv"
  output_directory: "lib/l10n"
  filename_prepend: "intl_"
  csv_settings:
    delimiter: ";"
    description_index: 1
    base_index: 2

设置说明

Setting Description
input_filepath 必需。输入 CSV 文件的路径。
output_directory 生成输出 ARB 文件的目录。默认为 lib/l10n
filename_prepend 生成文件名前缀。默认为空字符串。
csv_settings: delimiter 分隔 CSV 文件列的分隔符。默认为 ,
csv_settings: description_index 描述列的索引。默认为 null
csv_settings: base_index 输入 CSV 文件中基础语言的列索引。默认为 1

Run Package

确保当前工作目录是项目根目录,然后运行以下命令:

dart run arb_generator

ARB 文件将生成在 output_directory 目录中。

Collaboration

发现任何问题?请在 GitHub 上提交一个 issue!想贡献新功能? fork 仓库并提交 PR!

示例代码

以下是一个简单的示例,展示如何在 Flutter 项目中使用生成的 ARB 文件进行国际化:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.welcome('John')),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.myKey),
      ),
    );
  }
}

在这个示例中,MyApp 使用了 AppLocalizations 来加载本地化资源,并在 MyHomePage 中展示了如何使用这些资源。


更多关于Flutter自动化资源生成插件arb_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动化资源生成插件arb_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用 arb_generator 插件来自动生成 Flutter 本地化资源(ARB 文件)的示例。arb_generator 是一个可以帮助开发者从 Dart 代码生成 ARB 文件的工具,这对于管理多语言应用非常有用。

首先,确保你的 Flutter 项目中已经添加了 arb_generator 依赖。你可以通过修改 pubspec.yaml 文件来添加这个依赖:

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  build_runner: ^2.1.4
  arb_generator: ^x.y.z  # 请替换为最新版本号

然后,运行 flutter pub get 来获取依赖。

接下来,假设你有一个简单的 Flutter 应用,并且你想要为应用中的字符串生成 ARB 文件。你可以按照以下步骤操作:

  1. 创建一个 Dart 文件来定义你的本地化字符串

创建一个名为 l10n.dart 的文件,并在其中定义你的本地化字符串。使用 @ArbValue 注解来标记这些字符串。

import 'package:arb_generator/arb_generator.dart';

part 'l10n.g.dart';

@ArbGenerator()
class MyLocalizations {
  @ArbValue('Hello, World!')
  String get helloWorld => 'Hello, World!';

  @ArbValue('Welcome to Flutter!')
  String get welcomeMessage => 'Welcome to Flutter!';
}

注意:你需要手动创建 l10n.g.dart 文件,但实际上这个文件将由 build_runner 生成。

  1. 生成 ARB 文件

在命令行中,导航到你的 Flutter 项目根目录,并运行以下命令来生成 ARB 文件:

flutter pub run build_runner build

如果一切正常,你应该会在项目根目录下看到一个名为 lib/l10n/ 的文件夹,里面包含了生成的 ARB 文件,例如 my_localizations_en.arb

生成的 ARB 文件可能看起来像这样:

{
  "@@locale": "en",
  "helloWorld": "Hello, World!",
  "welcomeMessage": "Welcome to Flutter!"
}
  1. 在 Flutter 应用中使用生成的本地化资源

现在,你可以在你的 Flutter 应用中使用这些本地化资源。首先,确保你的 Flutter 应用已经配置好本地化支持。然后,你可以像这样加载和使用这些字符串:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n.dart'; // 导入你定义的本地化类

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        // 添加你的本地化委托(注意:这里只是示例,实际使用时需要根据你的需求配置)
        // 通常你会有一个自定义的 LocalizationsDelegate 来加载你的 ARB 文件
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en'), // 添加你支持的语言
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 假设你已经有一个方法来获取 MyLocalizations 的实例
    final MyLocalizations localizations = MyLocalizations();
    
    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.helloWorld),
      ),
      body: Center(
        child: Text(localizations.welcomeMessage),
      ),
    );
  }
}

注意:上面的代码示例中关于 localizationsDelegates 和如何获取 MyLocalizations 实例的部分是简化的。在实际应用中,你需要实现一个 LocalizationsDelegate 来加载和使用你的 ARB 文件。这通常涉及到使用 Flutter Intl 插件或其他方法来更全面地管理本地化资源。

arb_generator 插件的主要目的是简化从 Dart 代码到 ARB 文件的生成过程,但实际的本地化加载和使用还需要结合 Flutter 的本地化系统来完成。希望这个示例能帮助你理解如何使用 arb_generator 插件。

回到顶部