Flutter国际化翻译插件windmillcode_flutter_translate的使用

windmillcode_flutter_translate 是一个功能齐全的本地化/国际化库，适用于 Flutter 应用。它允许你为应用内容定义不同语言的翻译，并轻松地在这些语言之间切换。

示例

特性

• 非常易于使用
• 支持移动设备、网页和桌面端
• 支持复数形式和双语形式
• 支持 languageCode (en) 和 languageCode_countryCode (en_US) 两种格式的区域设置
• 自动保存并恢复选择的区域设置（通过简单的实现）
• 全面支持右到左的区域设置
• 支持回退区域设置（如果系统区域设置不受支持）
• 支持内联或嵌套的 JSON

使用文档

完整的文档可在 wiki 页面 上查看。

要开始使用，请参阅 安装、配置与使用。

示例代码

import 'package:example/home/home_page.dart';
import 'package:flutter/material.dart';
import 'package:windmillcode_flutter_translate/flutter_translate.dart';

void main() async {
  // 初始化翻译插件
  await FlutterTranslate.initialize(FlutterTranslateOptions(
    initial: 'en', // 初始语言
    fallback: 'en', // 回退语言
    supported: ['en', 'es', 'ru', 'ar'], // 支持的语言列表
    autoSave: true, // 是否自动保存语言选择
    missingKeyStrategy: MissingKeyStrategy.key, // 处理缺失键的策略
    loader: AssetsLoaderOptions(), // 加载器选项
  ));

  runApp(const LocalizedApp(MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Translate',
      locale: context.locale, // 设置当前语言环境
      supportedLocales: context.supportedLocales, // 支持的语言环境
      localizationsDelegates: context.localizationDelegates, // 本地化代理
      theme: ThemeData(primarySwatch: Colors.blue), // 主题颜色
      home: const HomePage(), // 主页面
    );
  }
}

如何使用

访问嵌套对象

为了访问嵌套对象中的翻译，可以使用点符号 (.) 来连接键名。

String title = translate("dashboard.title");
print(title); // 输出 "Dashboard" 或 "Tablero"（取决于当前语言环境）

访问列表项

对于列表中的项目，同样使用点符号 (.) 后跟项目的索引。

String messageNotification = translate("dashboard.notifications.0", args: {"count": 5});
print(messageNotification); // 输出 "You have 5 new messages" 或 "Tienes 5 mensajes nuevos"

String subscriptionNotification = translate("dashboard.notifications.1", args: {"days": 3});
print(subscriptionNotification); // 输出 "Your subscription ends in 3 days" 或 "Tu suscripción termina en 3 días"

访问数组内的嵌套对象

如果 JSON 结构包含数组内的嵌套对象，你可以通过索引和键来访问它们。

String alertMessage = translate("dashboard.alerts.0.message");
print(alertMessage); // 假设已正确本地化，输出基于当前语言环境的消息

使用复数形式

为了处理基于当前语言环境的复数形式，我们需要扩展我们的 JSON 结构以包括复数形式的翻译。Intl 包通常用于 Flutter 中的本地化，支持不同的复数类别，如零、一、二、少数、多数和其他，具体取决于语言规则。

// en.json
{
  "dashboard": {
    "title": "Dashboard",
    "messages": {
      "zero": "You have no new messages",
      "one": "You have one new message",
      "other": "You have {count} new messages"
    },
    "menu": {
      "home": "Home",
      "profile": "Profile",
      "settings": "Settings"
    }
  }
}

// es.json
{
  "dashboard": {
    "title": "Tablero",
    "messages": {
      "zero": "No tienes mensajes nuevos",
      "one": "Tienes un mensaje nuevo",
      "other": "Tienes {count} mensajes nuevos"
    },
    "menu": {
      "home": "Inicio",
      "profile": "Perfil",
      "settings": "Configuración"
    }
  }
}

然后使用 translatePlural 函数来根据消息数量选择正确的复数形式：

String noMessages = translatePlural("dashboard.messages", 0);
print(noMessages); // 输出 "You have no new messages" 或 "No tienes mensajes nuevos"

String oneMessage = translatePlural("dashboard.messages", 1);
print(oneMessage); // 输出 "You have one new message" 或 "Tienes un mensaje nuevo"

String multipleMessages = translatePlural("dashboard.messages", 5, args: {"count": 5});
print(multipleMessages); // 输出 "You have 5 new messages" 或 "Tienes 5 mensajes nuevos"

动态展示列表

如果你有一个包含多个选项的列表，可以动态地将这些选项翻译并在 ListView 中显示：

Widget buildOptionList(BuildContext context) {
  // 假设选项的数量是已知的
  int optionCount = 3;

  return ListView.builder(
    itemCount: optionCount,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(translate('options.$index')),
      );
    },
  );
}

动态展示键值对

考虑一个包含键值对的地图：

{
  "settings": {
    "volume": "Volume",
    "brightness": "Brightness"
  }
}

可以将其动态地显示在一个类似 ListView 的组件中：

Widget buildSettingsList(BuildContext context) {
  Map<String, String> settings = getValueAtKeyPath('settings');

  return ListView.builder(
    itemCount: settings.length,
    itemBuilder: (context, index) {
      String key = settings.keys.elementAt(index);
      return ListTile(
        title: Text(translate(key)),
        subtitle: Text(translate("settings.$key")),
      );
    },
  );
}

动态展示嵌套结构

假设有一个包含列表和地图的组合结构：

{
  "categories": ["books", "movies"],
  "books": ["Fiction", "Non-fiction"],
  "movies": ["Action", "Comedy"]
}

可以在 UI 中动态地展示这些嵌套结构，例如使用 ExpansionTile：

Widget buildCategoryList(BuildContext context) {
  List<String> categories = getValueAtKeyPath('categories');

  return ListView.builder(
    itemCount: categories.length,
    itemBuilder: (context, index) {
      String category = categories[index];
      List<String> subcategories = getValueAtKeyPath(category);

      return ExpansionTile(
        title: Text(translate(category)),
        children: subcategories.map((subcategory) {
          return ListTile(
            title: Text(translate('$category.$subcategory')),
          );
        }).toList(),
      );
    },
  );
}

这些示例展示了如何使用 translate 函数动态地从复杂的 JSON 结构中获取本地化字符串，同时处理动态值和嵌套及数组结构。

动态展示复数化的选项

假设你的 JSON 文件包含带有复数形式的列表：

{
  "messages": [
    {"key": "inbox_message", "zero": "No messages", "one": "One message", "other": "{} messages"},
    {"key": "sent_message", "zero": "No messages sent", "one": "One message sent", "other": "{} messages sent"}
  ]
}

可以创建一个方法来根据计数显示复数化的消息：

Widget buildMessageList(BuildContext context, List<int> messageCounts) {
  return ListView.builder(
    itemCount: messageCounts.length,
    itemBuilder: (context, index) {
      String keyPath = 'messages.$index.key';
      int count = messageCounts[index];
      return ListTile(
        title: Text(translatePlural(keyPath, count)),
      );
    },
  );
}

动态展示复数化的设置

考虑一个带有复数形式值的地图：

{
  "notifications": {
    "email": {"zero": "No emails", "one": "One email", "other": "{} emails"},
    "alert": {"zero": "No alerts", "one": "One alert", "other": "{} alerts"}
  }
}

可以使用复数形式来显示这些设置：

Widget buildNotificationSettings(BuildContext context, Map<String, int> notificationCounts) {
  return ListView.builder(
    itemCount: notificationCounts.length,
    itemBuilder: (context, index) {
      String key = notificationCounts.keys.elementAt(index);
      int count = notificationCounts[key];
      return ListTile(
        title: Text(translatePlural('notifications.$key', count)),
      );
    },
  );
}

动态展示嵌套的复数化

假设你的 JSON 文件包含带有复数形式的类别及其项目：

{
  "categories": ["emails", "alerts"],
  "emails": {"zero": "No emails", "one": "One email", "other": "{} emails"},
  "alerts": {"zero": "No alerts", "one": "One alert", "other": "{} alerts"}
}

可以在 UI 中动态地展示这些信息，例如使用 ExpansionTile，并包含计数：

Widget buildCategoryList(BuildContext context, Map<String, int> itemCounts) {
  List<String> categories = getValueAtKeyPath('categories');

  return ListView.builder(
    itemCount: categories.length,
    itemBuilder: (context, index) {
      String category = categories[index];
      int count = itemCounts[category] ?? 0;

      return ExpansionTile(
        title: Text(translatePlural(category, count)),
      );
    },
  );
}