Flutter本地化生成插件localization_generator的使用

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

Flutter本地化生成插件localization_generator的使用

localization_generator 是一个命令行工具，用于从JSON文件生成本地化资源。以下是该插件的详细使用方法。

开始使用

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  intl: ^0.17.0
dev_dependencies:
  localization_generator: <last_version>

然后创建一个存放翻译文件的文件夹，例如 l10n 文件夹，并在其中添加不同语言的JSON文件：

l10n
  +- zh.json
  +- en.json
  +- zh-Hant.json

每个JSON文件的内容示例如下：

// l10n/zh.json
{
  "hi": "你好",
  "price": "价格：{currency}",
  "gender": "{gender} 性别",
  "reply": "{count} 条回复"
}

运行以下命令生成本地化资源：

flutter pub run localization_generator --output=./l10n --input=./l10n

配置应用

导入生成的本地化文件并配置应用以支持多语言环境。在 main.dart 文件中添加如下代码：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/localization.dart'; // 导入生成的本地化文件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (context) {
        return Localized.of(context).hello(name: "我的名字"); // 使用本地化文本
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        Localized.delegate, // 添加生成的本地化代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: Localized.delegate.supportedLocales, // 设置支持的语言列表
      home: Builder(builder: (context) {
        return MyHomePage();
      }),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Localized.of(context).hello(name: "我的名字")), // 在AppBar中使用本地化文本
      ),
      body: Column(
        children: [
          Text(Localized.of(context).hi), // 使用本地化文本
          Text(Localized.of(context).price(currency: "TWD")), // 使用带参数的本地化文本
          Text(Localized.of(context).gender(gender: "女")), // 使用带参数的本地化文本
          Text(Localized.of(context).reply(count: 0)), // 使用带参数的本地化文本
        ],
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用Flutter本地化生成插件localization_generator的示例代码和说明。这个插件可以大大简化Flutter应用中的本地化过程。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加localization_generator依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

dev_dependencies:
  build_runner: ^2.0.4
  localization_generator: ^9.0.0  # 请确保使用最新版本

步骤 2: 创建arb文件

在lib/l10n目录下创建你的ARB（Application Resource Bundle）文件。例如，可以创建messages_en.arb和messages_zh.arb文件：

lib/l10n/messages_en.arb

{
  "welcome_message": "Welcome to our app!",
  "goodbye_message": "Goodbye!"
}

lib/l10n/messages_zh.arb

{
  "welcome_message": "欢迎来到我们的应用！",
  "goodbye_message": "再见！"
}

步骤 3: 生成本地化文件

在你的项目根目录下运行以下命令来生成本地化文件：

flutter pub run build_runner build

这将生成一个l10n目录，其中包含所有生成的本地化类文件。

步骤 4: 配置MaterialApp

在你的main.dart文件中，配置MaterialApp以支持本地化：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final S localizations = S.of(context); // 获取本地化实例
    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.welcome_message),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(localizations.goodbye_message)),
            );
          },
          child: Text('Show Goodbye Message'),
        ),
      ),
    );
  }
}

步骤 5: 运行应用

现在你可以运行你的应用，并根据设备的语言设置查看不同的本地化内容。你也可以在模拟器或真实设备上更改语言设置来测试不同的本地化效果。

注意事项

  • 确保ARB文件的命名和路径正确。
  • 在运行flutter pub run build_runner build之前，确保flutter pub get已经成功运行，所有依赖都已安装。
  • 在需要本地化的字符串处使用S.of(context).your_key来获取本地化后的字符串。

通过以上步骤，你已经成功地在Flutter应用中使用localization_generator插件实现了本地化。希望这个示例对你有所帮助！

回到顶部