Flutter多语言翻译插件impaktfull_translations的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter多语言翻译插件impaktfull_translations的使用

impaktfull_translations 是一个用于从 impaktfull 翻译工具自动下载翻译文件的 Dart 包。这些翻译文件可以在您的 Flutter 应用中使用。该包的其余实现由 locale_gen 完成。

免责声明

impaktfull_cli 目前处于不稳定且未经测试状态。所有版本号小于1.0.0的软件不应在生产环境中使用,除非您想对其进行测试。

使用方法

pubspec.yaml 中添加依赖项

dependencies:
  intl: <version-that-matches-your-project>
  sprintf: ^7.0.0

dev-dependencies:
  impaktfull_translations: <latest-version>

配置 pubspec.yaml

pubspec.yaml 文件中添加您的本地文件夹路径,以便加载所有翻译文件。

flutter:
  assets:
    - assets/locale/

然后,添加 impaktfull_translations 的配置以获取最新的翻译文件:

impaktfull_translations:
  api_key: "enter-your-api-key" # 如果未设置环境变量 IMPAKTFULL_TRANSLATIONS_TRANSLATION_APP_API_KEY,则需要此参数
  app_uuid: "translation-app-uuid" # 如果未设置环境变量 IMPAKTFULL_TRANSLATIONS_TRANSLATION_APP_UUID,则需要此参数
  host: "host-ip-or-domain" # 默认为 https://dashboard.impaktfull.com,如果未设置环境变量 IMPAKTFULL_TRANSLATIONS_HOST,则使用此值
  default_language: "nl"
  languages: ["en", "nl"]
  locale_assets_path: "assets/locale/"
  assets_path: "assets/locale/"

设置环境变量

可以将以下环境变量用于 api_key 和/或 app_uuid 和/或 host

  • IMPAKTFULL_TRANSLATIONS_TRANSLATION_APP_API_KEY
  • IMPAKTFULL_TRANSLATIONS_TRANSLATION_APP_UUID
  • IMPAKTFULL_TRANSLATIONS_HOST

使用 Flutter 运行包

在命令行中运行以下命令:

flutter packages pub run impaktfull_translations

使用 Dart 运行包

在命令行中运行以下命令:

dart pub run impaktfull_translations

参数

您可以传递字符串或数字作为参数。格式化字符串时使用 %1$s,格式化数字时使用 %1$d。数字表示参数的索引。例如:

nl '%1$s, ik woon in %2$s. Wist je dat niet?' => KOEN, ik woon in ANTWERPEN. Wist je dat niet?
fr 'I live in %2$s. You didn't knew that %1$s?' => I live in ANTWERP. You didn't knew that KOEN?

复数形式

在 JSON 文件中,可以使用以下语法来指定复数形式:

{
  "example_plural": {
    "zero": "You have no items",
    "one": "You have %1$d item",
    "two": "You have 2 items, party!",
    "few": "You have a few items, nice!",
    "many": "You have many items, fantastic!",
    "other": "You have %1$d items"
  }
}

这将生成函数,您需要将项目数量作为参数传递给这些函数。根据项目数量,函数会返回正确的翻译。请注意,count 参数不会作为字符串插值的参数传递。

示例代码

以下是完整的示例代码:

import 'package:flutter/material.dart';
import 'package:impaktfull_translations_example/app.dart';

Future<void> main() async {
  runApp(const MyApp());
}

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

1 回复

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


当然,关于Flutter中impaktfull_translations插件的使用,以下是一个基本的代码案例,展示如何设置和使用该插件进行多语言翻译。

首先,确保你已经在pubspec.yaml文件中添加了impaktfull_translations依赖:

dependencies:
  flutter:
    sdk: flutter
  impaktfull_translations: ^最新版本号  # 请替换为当前最新版本号

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

接下来,在你的Flutter项目中设置和使用impaktfull_translations插件。以下是一个简单的例子:

  1. 创建语言文件

    assets文件夹下创建多个语言文件,例如en.jsonzh.json

    assets/lang/en.json

    {
      "greeting": "Hello",
      "farewell": "Goodbye"
    }
    

    assets/lang/zh.json

    {
      "greeting": "你好",
      "farewell": "再见"
    }
    
  2. pubspec.yaml中声明语言文件

    flutter:
      assets:
        - assets/lang/en.json
        - assets/lang/zh.json
    
  3. 初始化impaktfull_translations

    在你的主应用文件(通常是main.dart)中,初始化翻译插件并加载语言文件。

    import 'package:flutter/material.dart';
    import 'package:impaktfull_translations/impaktfull_translations.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
          localizationsDelegates: [
            // 添加ImpaktfullTranslationsDelegate
            ImpaktfullTranslationsDelegate(
              fallbackLocale: Locale('en', 'US'),
              supportedLocales: [
                Locale('en', 'US'),
                Locale('zh', 'CN'),
              ],
              jsonFiles: {
                'en': 'assets/lang/en.json',
                'zh': 'assets/lang/zh.json',
              },
            ),
            // 其他localizationsDelegates,比如GlobalMaterialLocalizations等
          ],
          locale: Locale('en', 'US'), // 默认语言
          localeResolutionCallback: (locale, supportedLocales) {
            // 根据需要解析和返回适当的Locale
            for (var supportedLocale in supportedLocales) {
              if (supportedLocale.languageCode == locale?.languageCode &&
                  supportedLocale.countryCode == locale?.countryCode) {
                return supportedLocale;
              }
            }
            return supportedLocales.first;
          },
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      ImpaktfullTranslations _translations;
    
      @override
      Widget build(BuildContext context) {
        _translations = ImpaktfullTranslations.of(context);
        return Scaffold(
          appBar: AppBar(
            title: Text(_translations.translate('greeting')),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(_translations.translate('greeting')),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      Locale myLocale =
                          ModalRoute.of(context)?.settings.locale ?? Locale('en', 'US');
                      if (myLocale.languageCode == 'en') {
                        ModalRoute.of(context)?.settings.locale = Locale('zh', 'CN');
                      } else {
                        ModalRoute.of(context)?.settings.locale = Locale('en', 'US');
                      }
                    });
                  },
                  child: Text(_translations.translate('farewell')),
                ),
              ],
            ),
          ),
        );
      }
    }
    

在这个例子中,我们:

  • 初始化了ImpaktfullTranslationsDelegate,并指定了支持的语言和对应的JSON文件。
  • MyHomePage中,使用ImpaktfullTranslations.of(context)获取翻译实例,并使用_translations.translate('key')来获取翻译后的文本。
  • 添加了一个按钮来切换语言,虽然这里的语言切换方法较为简单(仅作为示例),实际应用中可能需要更复杂的逻辑来处理语言切换。

请根据你的具体需求调整代码,例如处理语言切换的逻辑、添加更多的语言支持等。

回到顶部