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

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

欢迎使用Translatron!

版本
许可证
构建状态

安装

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  translatron: [最新版本]

将包导入到你的 Dart 文件中：

import 'package:translatron/translatron.dart';

描述

Translatron 包是为 Flutter 应用程序设计的一个翻译工具。它提供了一个简单易用的界面来管理翻译，无论是从自定义 API 还是从本地翻译文件。

该包包括加载和保存语言文件的功能，将 .json 字符串转换为映射，以及处理异常。
该包支持多种语言和自定义 API 头部。
它还提供了向应用中添加自定义委托的方法，并可以使用提供者来更改语言。
此外，该包还提供了一些与翻译相关的功能，如翻译字符串、检查语言是否活动、获取支持的语言列表以及获取或设置选定的语言区域。

设置与使用

设置

你必须在项目根目录下创建一个名为 lang/ 的文件夹，并在其中添加多个 .json 文件，例如：en.json, hu.json 等等。

每个 .json 文件中至少需要添加一个键值对，例如：

{
    "key_in_the_json_file": "这将在你的应用中作为翻译文本"
}

否则，当你运行应用时会收到错误消息。

确保将此文件夹添加到你的 pubspec.yaml 文件中：

flutter:
  assets:
    - lang/

初始化

你必须在主函数中初始化 Translatron 以运行应用程序，但有多种方式可以进行初始化。你可以根据需求选择使用哪种方法。

初始化参数

  • String hostname: 你的 API 的主机名。
  • String versionPath: 你的 API 版本端点的路径。
  • String translationsPath: 你的 API 翻译端点的路径。
  • bool hasWebServer: 是否使用 Web 服务器。
  • List<Locale> supportedLocales: 支持的语言列表。
  • Map<String, String>? apiHeaders: 要添加到 API 请求中的头部。

默认值

String hostname = "",
String versionPath = "",
String translationsPath = "", 
List<Locale> supportedLocales = const [Locale('hu')],
Map<String, String>? apiHeaders,
bool hasWebServer = false,
bool reLoadAtStart = false,

初始化

你可以像下面这样不设置任何参数来初始化 Translatron：

void main() async {
    await Translatron.init();
}

或者，你可以单独设置每个参数，例如：

void main() async {
  await Translatron.init(
      hostname: "https://example.com",
      versionPath: "/api/translation/version",
      translationsPath: "/api/translation/translations",
      hasWebServer: true,
      supportedLocales: const [
        Locale('hu'),
        Locale('en'),
      ],
      apiHeaders: const {
        "Authorization": "Bearer $token",
        "Content-Type: application/json"
      });
}

注意事项

  • 如果你在 supportedLocales 中添加了一个新的语言代码，你还需要在同一文件夹中添加同名的 .json 文件。
  • 如果你设置了 hasWebServer 参数为 true，你还必须设置 hostname, versionPath 和 translationsPath 参数。
  • 你应该始终检查日志，以查看是否有任何设置错误。

添加自定义委托到应用

你需要向应用中添加自定义委托使其工作。可以通过在 MaterialApp 小部件中添加以下代码来实现：

return MaterialApp.router(
    title: 'DemoApp',
    localizationsDelegates:  const [
        Translatron.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
    ],
    // 根据你的状态管理来更改
    locale: Provider.of<LocaleProvider>(context, listen: true).getLocale,
    supportedLocales: Translatron.getSupportedLocales,
);

示例提供者

你可以使用或修改以下提供者类来管理应用中的语言：

class LocaleProvider with ChangeNotifier {
    Locale? locale = Translatron.getSelectedLanguageLocale;
    
    Locale? get getLocale {
        return locale;
    } 

    void changeLocale(Locale newLocale) {
        locale = newLocale;
        Translatron.setSelectedLanguageLocale = locale!;
        notifyListeners();
    }
}

使用提供者更改语言

你可以使用以下代码通过提供者来更改应用中的语言：

Provider.of<LocaleProvider>(context, listen: false)
    .changeLocale(const Locale('en', 'EN'));

函数

翻译

此函数用于将给定的键从 .json 文件中的键翻译成当前选定的语言。它接受一个参数：

  • String translation_key: 要翻译的字符串的键。
String translation_key = "key_in_the_json_file";
Translatron.of(context)!.translate(translation_key);

检查语言是否活动

此函数用于检查给定的语言是否当前处于活动状态，它将返回一个布尔值。它接受一个参数：

  • languageCode: 要检查的语言代码。
String languageCode = "en";
Translatron.isLanguageActive(languageCode);

获取支持的语言列表

此函数用于获取所有支持的语言列表。它返回一个包含所有支持语言的 List<Locale>。

Translatron.getSupportedLocales;

获取选定的语言区域

此函数用于获取当前选定的语言区域。它返回一个包含当前选定语言区域的 Locale，但在某些情况下可能是可空的。

Translatron.getSelectedLanguageLocale;

设置选定的语言区域

此函数用于设置当前选定的语言区域。它接受一个参数：

  • Locale locale: 要设置为当前选定语言区域的语言区域。
Locale locale = const Locale('en');
Translatron.setSelectedLanguageLocale = locale!;

命令行辅助工具

该包还包括一个命令行工具，帮助你管理翻译。你可以使用以下命令来管理翻译：

检查未使用的翻译

此命令用于查找项目中的未使用翻译。如果找到任何未使用的翻译，命令将在控制台中打印出这些翻译的列表并关联语言代码。

application % dart run translatron --unused

未使用的翻译

统计信息

此命令将为你提供项目中翻译文件的统计信息。它将打印每种语言文件中的翻译数量以及项目中的总翻译数量。

dart run translatron --stat

统计信息

检查

此命令用于检查项目中的翻译文件。它将在控制台中打印出翻译文件中发现的任何错误或警告。

dart run translatron --check

更多关于Flutter国际化翻译插件translatron的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化翻译插件translatron的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用translatron插件进行国际化翻译的一个基本示例。translatron是一个用于Flutter应用的国际化翻译插件，但需要注意的是，由于插件的更新和API的变化，以下代码可能需要根据实际插件版本进行调整。

首先，确保你已经在pubspec.yaml文件中添加了translatron依赖：

dependencies:
  flutter:
    sdk: flutter
  translatron: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们将展示如何在Flutter应用中使用translatron进行国际化设置。

1. 初始化Translatron

在你的应用的主入口文件（通常是main.dart）中，初始化Translatron：

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

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

  // 初始化Translatron
  await Translatron.init(
    apiKey: '你的Translatron API密钥',  // 请替换为你的Translatron API密钥
    projectId: '你的项目ID',            // 请替换为你的Translatron项目ID
    languageCode: 'en',                 // 默认语言代码
    fallbackLanguageCode: 'en',         // 回退语言代码
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      localizationsDelegates: [
        // 添加Translatron的localizationsDelegate
        Translatron.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: Translatron.supportedLocales,
      locale: Translatron.locale,
    );
  }
}

2. 使用翻译文本

在你的UI组件中，使用Translatron.tr方法来获取翻译后的文本：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Translatron.tr('app_name')),  // 假设'app_name'是你的翻译键
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              Translatron.tr('hello_world'),  // 假设'hello_world'是你的翻译键
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 切换语言示例
          String newLanguageCode = 'zh';  // 假设要切换到中文
          await Translatron.setLocale(Locale(newLanguageCode));
          setState(() {});  // 触发UI重建以显示新语言
        },
        tooltip: 'Change Language',
        child: Icon(Icons.translate),
      ),
    );
  }
}

3. 在Translatron平台管理翻译

确保你已经在Translatron平台上为你的项目添加了相应的翻译键值对。例如，你可能会有以下翻译：

  • app_name:

    • English: My Flutter App
    • Chinese: 我的Flutter应用

  • hello_world:

    • English: Hello, World!
    • Chinese: 你好，世界！

注意

  • 请确保你已经正确配置了Translatron API密钥和项目ID。
  • 根据你的项目需求，你可能需要调整UI和逻辑。
  • 由于translatron插件的具体实现和API可能会随时间变化，请参考最新的官方文档和示例代码。

这个示例展示了如何在Flutter应用中集成和使用translatron插件进行国际化翻译。希望这对你有所帮助！

回到顶部