Flutter翻译功能插件trans_flutter的使用

Flutter翻译功能插件trans_flutter的使用

trans_flutter 是一个用于轻松实现本地化和翻译管理的 Flutter 包。该包需要与 fluttertrans 命令行工具配合使用。

设置

要开始使用 trans_flutter 包，请遵循以下步骤：

  1. 添加包到你的项目中：

    flutter pub add trans_flutter

  2. 配置资源文件： 在 pubspec.yaml 文件中添加以下内容以包含翻译资源：

    flutter:
  assets:
    - assets/translations/

  3. 安装全局 Flutter 翻译工具：

    dart pub global activate fluttertrans

  4. 生成本地化文件： 在终端运行以下命令：

    fluttertrans

    这个命令会在 assets/translations/all_locales.json 文件中生成一个文件。打开这个文件并添加以下 JSON 内容：

    {
    "supportedLocales": ["en", "es"],
    "fallbackLocale": "hi"
}
    • supportedLocales 定义了应用程序支持的语言列表。你可以根据需要添加更多语言。
    • fallbackLocale 定义了当用户的首选语言不受支持时使用的语言。

示例用法

完成设置后，你可以在 Flutter 应用程序中使用 trans_flutter 包，如下所示：

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

void main() async {
  /// 确保在调用包的任何其他方法之前调用此方法
  WidgetsFlutterBinding.ensureInitialized();

  /// 需要调用此方法以从 `all_locales.json` 文件加载所有受支持的语言
  await AppLocalization.initialize();

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TranslationBuilder(
      builder: (context, locale) {
        return MaterialApp(
          /// 下面三行设置应用程序的本地化
          locale: locale,
          supportedLocales: AppLocalization.supportedLocales,
          localizationsDelegates: AppLocalization.localizationsDelegates,
          debugShowCheckedModeBanner: false,
          title: 'Hello World App',
          home: const MyHomePage(),
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 要启用此页面的本地化，请调用 [AppLocalization.enable]
    /// 此方法是必需的，以便 Flutter 知道此页面是本地化的
    AppLocalization.enable(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'.tr),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Some sample text'.tr),
            Wrap(
              spacing: 10,
              runSpacing: 10,
              children: [
                for (final locale in AppLocalization.supportedLocales)
                  ElevatedButton(
                    onPressed: () {
                      AppLocalization.changeLocale(locale); // 更改语言环境
                    },
                    child: Text(locale.languageCode),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用trans_flutter插件来实现翻译功能的代码案例。trans_flutter插件允许你通过简单的键值对配置来实现应用的国际化。

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

dependencies:
  flutter:
    sdk: flutter
  trans_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来，你需要准备翻译文件。通常，这些文件是以JSON格式存储的。例如，你可以创建两个文件：en.json和zh.json，分别存储英文和中文的翻译内容。

en.json:

{
  "welcome_message": "Welcome",
  "goodbye_message": "Goodbye"
}

zh.json:

{
  "welcome_message": "欢迎",
  "goodbye_message": "再见"
}

然后，在你的Flutter项目中，创建一个assets文件夹，并将这些JSON文件放在其中。同时，在pubspec.yaml中声明这些资产文件：

flutter:
  assets:
    - assets/en.json
    - assets/zh.json

接下来，你需要设置TransFlutter插件。在你的主应用文件（通常是main.dart）中，按照以下步骤进行配置：

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

void main() {
  // 初始化TransFlutter
  TransFlutter.init(
    // 加载翻译文件
    loadAssets: ['assets/en.json', 'assets/zh.json'],
    // 设置默认语言
    defaultLanguage: 'en',
    // 注册语言代码与实际文件名的映射关系
    languagesMap: {
      'en': 'en.json',
      'zh': 'zh.json',
    },
  );

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(TransFlutter.translate('welcome_message')),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                TransFlutter.translate('welcome_message'),
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 切换语言
                  setState(() {
                    String currentLanguage = TransFlutter.currentLanguage;
                    TransFlutter.currentLanguage = currentLanguage == 'en' ? 'zh' : 'en';
                  });
                },
                child: Text(TransFlutter.translate('change_language')), // 你需要在翻译文件中添加这个键
              ),
              SizedBox(height: 20),
              Text(
                TransFlutter.translate('goodbye_message'),
                style: TextStyle(fontSize: 24),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：在上面的代码中，TransFlutter.translate('change_language')假设你已经在相应的翻译文件中添加了"change_language": "Change Language"这样的键值对。你需要根据实际需求添加这个键到翻译文件中。

这个示例展示了如何初始化TransFlutter，加载翻译文件，设置默认语言，并在UI中显示翻译后的文本。同时，还展示了如何通过点击按钮来切换语言。

确保你的翻译文件和代码中的键名保持一致，以避免翻译失败。

回到顶部