Flutter国际化插件easy_localization_generator的使用

easy_localization_generator

描述

easy_localization_generator 是一个用于从在线 Google Sheet 下载 CSV 文件并生成本地化键的工具。它可以与 easy_localization 和 easy_localization_loader 一起使用。

安装

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

dependencies:
  easy_localization: ^3.0.0
  easy_localization_loader: ^3.0.0

dev_dependencies:
  build_runner: ^2.0.0
  easy_localization_generator: ^1.0.0

使用

1. 创建一个 CSV Google Sheet

创建一个包含你翻译的表格。确保所有动态参数字符串都有参数名称，这将生成可读的翻译函数。

例如，你可以参考 这个示例表格 的格式：

确保你的表格已共享，并从链接中提取 DOCID 值：https://docs.google.com/spreadsheets/d/<DOCID>/edit?usp=sharing

2. 声明一个本地化代理

在 lib/localization/strings.dart 文件中声明一个 _Strings 类，并使用 @SheetLocalization 注解指向你的表格：

import 'dart:ui';

import 'package:easy_localization_generator/easy_localization_generator.dart';

part 'strings.g.dart';

@SheetLocalization(
  docId: 'DOCID',
  version: 1, // 每次重新生成时需要递增此版本号
  outDir: 'assets/langs', // 默认保存下载的 CSV 文件的目录
  outName: 'langs.csv', // 默认 CSV 文件名
  preservedKeywords: [
    'few',
    'many',
    'one',
    'other',
    'two',
    'zero',
    'male',
    'female',
  ],
)
class _Strings {}

3. 生成你的本地化文件

运行以下命令生成 lib/localization/strings.g.dart 文件：

flutter pub run build_runner build --delete-conflicting-outputs

4. 配置你的应用

按照 easy_localization 的 README.md 中的教程配置你的应用。

5. 开发

简单文本

Text(Strings.title)

带参数的文本

Text(
  Strings.msg(
    name: 'Jack',
    type: 'Hot',
  ),
),

带复数的文本

无命名参数版本

Text(Strings.amount(counter))

命名参数版本（推荐）

Text(
  Strings.clicked(
    counter,
    count: counter,
  ),
),

重新生成

由于 build_runner 的缓存系统，它无法检测到远程表格的变化，也无法知道是否需要重新生成。@SheetLocalization 注解中的 version 参数解决了这个问题。每次你需要触发新的生成时，只需递增该版本号并再次调用 build_runner。

为什么？

我发现 easy_localization 已经支持 代码生成，但它不支持与 Google Sheet 集成并从 CSV 文件生成键。因此，我制作了这个简单的生成器工具。

选项 2：使用 flutter_gen

我 fork 并添加了一些代码，使 Easy Localization Generator 可以与 flutter_gen 一起工作。请查看 这里。

示例代码

main.dart

import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_loader/easy_localization_loader.dart';
import 'package:flutter/material.dart';

import 'lang_view.dart';
import 'localization/strings.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(EasyLocalization(
      child: MyApp(),
      supportedLocales: Strings.supportedLocales,
      path: 'assets/langs/langs.csv',
      assetLoader: CsvAssetLoader()
      ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Easy localization'),
    );
  }
}

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

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  bool _gender = true;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  void switchGender(bool val) {
    setState(() {
      _gender = val;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Strings.title),
        actions: <Widget>[
          ElevatedButton(
            child: Icon(Icons.language),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (_) => LanguageView(), fullscreenDialog: true),
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Spacer(
              flex: 1,
            ),
            Text(
                Strings.supportedLanguage(
                    language: Strings.supportedLocales.length.toString()),
                style: TextStyle(
                    color: Colors.grey.shade600,
                    fontSize: 19,
                    fontWeight: FontWeight.bold)),
            Spacer(
              flex: 1,
            ),
            Text(
              Strings.gender,
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 19,
                  fontWeight: FontWeight.bold),
            ).tr(gender: _gender ? 'female' : 'male'),
            Center(child: Switch(value: _gender, onChanged: switchGender)),
            Spacer(
              flex: 1,
            ),
            Text(Strings.amount(counter)),
            Spacer(
              flex: 1,
            ),
            Text(Strings.msg(
              name: 'Jack',
              type: 'Hot',
            )),
            Text(Strings.clicked(counter, count: counter)),
            ElevatedButton(
              onPressed: () {
                incrementCounter();
              },
              child: Text(Strings.clickMe),
            ),
            SizedBox(
              height: 15,
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                context.deleteSaveLocale();
                context.setLocale(Strings.supportedLocales.first);
              },
              child: Text(Strings.resetLocale),
            ),
            Spacer(
              flex: 1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        child: Text('+1'),
      ),
    );
  }
}

希望这些信息对你有帮助！如果你有任何问题或需要进一步的帮助，请随时提问。