Flutter本地化管理插件katana_localization的使用

katana_localization 是一个用于Flutter应用的本地化管理插件，它简化了多语言支持的实现。本文将详细介绍如何使用该插件进行本地化管理。

安装

首先，在你的项目中添加以下依赖项：

flutter pub add katana_localization
flutter pub add --dev build_runner
flutter pub add --dev katana_localization_builder

前期准备

使用Google Spreadsheets

1. 从模板复制表格到自己的Google Drive。
2. 在复制的表格中，点击 File -> Share -> Share with others。
3. 在弹出窗口中将 General access 改为 Anyone with the link。

如何编写Google Spreadsheet

• 左侧第一列是键（key），每个键对应的翻译文本根据语言在第二行之后的单元格中定义。
• 如果键以 # 开头，则该行不会被读取，可用于注释。
• 可以通过 {variable_name} 来嵌入变量，并在翻译文本中使用相同的 {variable_name} 来显示值。

实现

定义文件创建

创建一个如 localization.dart 的Dart文件，并导入生成的部分文件：

// localization.dart
import 'package:katana_localization/katana_localization.dart';

part 'localization.localize.dart';

@GoogleSpreadSheetLocalize(
  [
    "https://docs.google.com/spreadsheets/d/1bw7IXEr7BGkZ4U6on0OuF7HQkTMgDSm6u5ThpBkDPeo/edit#gid=551986808",
  ],
  version: 1,
)
class AppLocalize extends _$AppLocalize { }

final l = AppLocalize();

注册翻译数据到MaterialApp

在 main.dart 中注册翻译数据：

// main.dart

import 'package:flutter/material.dart';
import 'package:katana_localization/katana_localization.dart';

import 'localization.dart';

void main() {
  runApp(const MainPage());
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return LocalizeScope(
      localize: l,
      builder: (context, localize) {
        return MaterialApp(
          locale: localize.locale,
          localizationsDelegates: localize.delegates(),
          supportedLocales: localize.supportedLocales(),
          localeResolutionCallback: localize.localeResolutionCallback(),
          title: "Test App",
          home: HomePage(),
        );
      },
    );
  }
}

自动生成代码

执行以下命令来自动生成代码：

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

如果需要清除缓存并重新生成代码，可以运行：

flutter pub run build_runner clean

使用

获取翻译文本

通过调用 AppLocalize 对象的方法来获取翻译对象：

print( l().user ); // 英文: User，日文: ユーザー

print(
  l().$(
    l().$( l().saving ).of.$( l().data )
  ).hasBeenCompleted
);
// 英文: Saving of Data has been completed.
// 日文: データの保存が完了しました。

获取和更改当前语言

可以通过 locale 属性获取当前语言，并通过 setCurrentLocale 方法更改语言：

print(l.locale); // 获取当前语言

l.setCurrentLocale(Locale('ja')); // 更改为日语

示例Demo

下面是一个完整的示例代码：

// main.dart

import 'package:flutter/material.dart';
import 'package:katana_localization/katana_localization.dart';

part 'main.localize.dart';

final l = AppLocalize();

@GoogleSpreadSheetLocalize(
  [
    "https://docs.google.com/spreadsheets/d/1bw7IXEr7BGkZ4U6on0OuF7HQkTMgDSm6u5ThpBkDPeo/edit#gid=551986808"
  ],
  version: 1,
)
class AppLocalize extends _$AppLocalize {}

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return LocalizeScope(
      localize: l,
      builder: (context, localize) {
        return MaterialApp(
          locale: localize.locale,
          localizationsDelegates: localize.delegates(),
          supportedLocales: localize.supportedLocales(),
          localeResolutionCallback: localize.localeResolutionCallback(),
          home: MainPage(),
          title: "Flutter Demo",
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
        );
      },
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(l().appTitle)),
      body: ListView(
        children: [
          ListTile(
            title: Text(l.locale.toLanguageTag()),
          ),
          ListTile(
            title: Text(l().ok),
          ),
          ListTile(
            title: Text(l().cancel),
          ),
          ListTile(
            title: Text(
              l().$(l().$(l().process).of.$(l().data)).hasBeenCompleted,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.change_circle),
        onPressed: () {
          l.setCurrentLocale(
            l.supportedLocales().firstWhere((element) => element != l.locale),
          );
        },
      ),
    );
  }
}

通过上述步骤，您可以轻松地在Flutter应用中集成多语言支持，并利用Google Spreadsheets进行高效的翻译管理。