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

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

介绍

locale_gen 是一个Dart工具，它可以将默认语言的JSON文件转换为Dart代码。这使得在Flutter应用中进行本地化变得更加方便。

示例

以下是一个示例动画展示如何使用这个插件：

设置步骤

添加依赖到 pubspec.yaml

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

dependencies:
  sprintf: ^6.0.2
  
dev_dependencies:
  locale_gen: <latest-version>

添加配置到 pubspec.yaml

确保你的本地化文件夹被添加到资产列表中，以便所有翻译都能加载：

flutter:
  assets:
    - assets/locale/

然后添加 locale_gen 配置以从JSON文件生成Dart代码：

locale_gen:
  default_language: 'nl'  # 默认语言
  languages: ['en', 'nl']  # 支持的语言
  locale_assets_path: 'assets/locale/'  # JSON文件保存位置
  assets_path: 'assets/locale/'  # JSON文件在Flutter应用中的位置
  output_path: 'lib/util/locale/'  # 生成的本地化文件保存位置
  doc_languages: ['en']  # 仅生成指定语言的文档，默认为所有语言

运行插件

使用Flutter运行

你可以通过以下命令运行 locale_gen 插件：

flutter packages pub run locale_gen

使用Dart运行

你也可以直接用Dart来运行：

dart pub run locale_gen

格式化本地化文件

在Flutter中格式化

flutter packages pub run locale_gen:format

在Dart中格式化

dart pub run locale_gen:format

版本迁移步骤

从9.0.0之前的版本迁移到9.0.0及以后

在版本9.0.0中，不再静态访问翻译，而是手动管理不同的本地化实例。例如：

class LocaleViewModel with ChangeNotifier {
  static final Localization localizationInstance = Localization();
  
  Future<void> init() async {
    await Localization.load(
      locale: locale,
      localizationOverrides: customLocalizationOverrides,
    );
    notifyListeners();
  }
}

你可以像这样在整个项目中访问这个 localizationInstance：

LocaleViewModel.localizationInstance.translation1;
LocaleViewModel.localizationInstance.translation2;
LocaleViewModel.localizationInstance.translation3;

从7.0.0之前的版本迁移到7.0.0及以后

最新的 locale_gen 版本不再需要传递上下文来访问翻译。这意味着有一些破坏性的更改。现在可以直接从 Localization 对象获取翻译，而无需传递上下文：

// 旧方法
Localization.of(context).translation;

// 新方法
Localization.translation;

初始化或更改本地化的方法也有所改变：

// 旧方法
localeDelegate = LocalizationDelegate(
  newLocale: locale,
  localizationOverrides: customLocalizationOverrides,
);

// 新方法
await Localization.load(
  locale: locale,
  localizationOverrides: customLocalizationOverrides,
);

参数和复数支持

参数支持

自0.1.0起支持参数传递，可以传递字符串、整数或双精度浮点数作为参数。例如：

{
  "example_with_args": "Hello %1$s, you have %2$d items."
}

复数支持

自8.0.0起支持复数处理。可以在JSON文件中使用以下语法：

{
  "example_plural": {
    "zero": "You have no items",
    "one": "You have %1$d item",
    "two": "You have 2 items, party!",
    "few": "You have a few items, nice!",
    "many": "You have many items, fantastic!",
    "other": "You have %1$d items"
  }
}

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 locale_gen：

import 'package:flutter/material.dart';
import 'package:locale_gen_example/app.dart';

Future<void> main() async {
  // 初始化应用程序
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              // 使用本地化字符串
              LocaleViewModel.localizationInstance.exampleWithArgs('Koen', _counter),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}