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

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

Logo

Localization Pro

Localization Pro 是一个用于流畅地管理本地化的动态 Flutter 包。

Localization Pro 简化了在 Flutter 应用程序中添加和管理多种语言的过程。它以灵活性为设计核心，支持动态语言切换、运行时翻译更新，并提供了一个简化 API 来增强本地化体验。无论是构建小型应用还是大型项目，Localization Pro 都能轻松实现适应用户语言的本地化界面。

特性

Localization Pro 由 Samandar Ahadjonov 在乌兹别克斯坦 Flutter 社区的支持下开发和维护，为 Flutter 应用程序的本地化管理提供了一个强大且灵活的解决方案。该包旨在满足全球开发者和乌兹别克斯坦活跃技术社区的具体需求。以下是其中的一些亮点：

社区驱动开发

  • 乌兹别克斯坦 Flutter 社区支持：该包受益于当地 Flutter 社区的积极参与和支持，确保它符合高标准并满足乌兹别克斯坦及以外地区的开发者需求。
  • Samandar Ahadjonov 背书：作为乌兹别克斯坦 Flutter 社区的知名成员，Samandar Ahadjonov 在此包的开发过程中提供了保障质量和支持。

动态本地化管理

  • 实时语言切换：允许用户在运行时无缝切换语言，无需重启应用程序，从而提升用户体验。
  • 动态翻译加载：高效加载和卸载翻译，适用于具有广泛和多样化本地化需求的应用程序。

由本地科技社区支持并由 Samandar Ahadjonov 领导，Localization Pro 是您为 Flutter 应用添加高效动态本地化的首选解决方案。

入门指南

欢迎使用 Localization Pro，这是 Flutter 应用程序的动态本地化解决方案。本指南将帮助您轻松地将 Localization Pro 集成到您的项目中。

步骤 1：将包添加到项目中

首先，您需要将 Localization Pro 添加到您的项目中。在 pubspec.yaml 文件的依赖部分插入以下行：

dependencies:
  localization_pro: ^x.y.z

步骤 2：安装包

在更新 pubspec.yaml 后，运行以下命令来安装包：

flutter pub get

该命令会获取包并将其安装到您的项目中。

步骤 3：导入包

在您希望使用本地化功能的 Dart 文件中添加以下导入语句：

import 'package:localization_pro/localization_provider.dart';

使用方法

Localization Pro 包提供了全面的本地化功能。以下是如何在 Flutter 应用程序中利用所有这些功能的指南。

设置地区和翻译

首先，定义应用程序将支持的语言和地区及其相应的翻译文件。以下是设置支持的语言和地区及其翻译的一个示例：

List<SupportedTranslation> supportedTranslations = [
  SupportedTranslation(name: '1', paths: {
    const Locale('en', 'US'): 'assets/locales/en_US/1.json',
    const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/1.json',
  }),
  SupportedTranslation(name: '2', paths: {
    const Locale('en', 'US'): 'assets/locales/en_US/2.json',
    const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/2.json',
  }),
  SupportedTranslation(name: '3', paths: {
    const Locale('en', 'US'): 'assets/locales/en_US/3.json',
    const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/3.json',
  })
];

确保您的 JSON 翻译文件结构正确并存储在指定路径。

主初始化

void main(){
  // 运行应用程序并将 MyApp 包裹在 LocalizationProvider 中
  runApp(LocalizationProvider(
      supportedTranslations: supportedTranslations,
      initialLocale: const Locale('uz', 'UZ'),
      initialTranslations: const ['1'],
      debugMode: true,
      child: MyApp()));
}

动态翻译管理

要实现在运行时动态添加或删除翻译，可以使用通过上下文提供的 LocalizationManager 的方法。例如：

添加翻译

context.addTranslation('1');

这将加载当前区域设置下的 ‘settings’ 翻译。

删除翻译

context.removeTranslation('1');

这将从当前区域设置中卸载 ‘settings’ 翻译。

更改区域设置

动态更改应用程序的区域设置并重新加载必要的翻译：

context.changeLocale(Locale('es', 'ES'));

这将把应用程序的区域设置更改为西班牙语并加载适当的翻译。

重新加载所有翻译

注意：当执行热重载时会自动调用此函数，并允许在不重启应用程序的情况下加载新的翻译。

context.reloadTranslations();

这将刷新当前区域设置中的所有翻译。

重新加载特定翻译

context.reloadTranslation('translationName');

这将刷新由 ‘translationName’ 标识的特定翻译。

翻译字符串

扩展 String 类以便在 UI 代码中轻松使用翻译：

Text('home_title'.tr())

带参数的翻译

假设您有一个翻译条目，期望包含名称和日期。JSON 可能看起来像这样：

{
  "greeting": "Hello, {name}! Today is {date}."
}

使用 trParams 在代码中

您可以使用 trParams 方法将动态值插入此翻译：

String greeting = 'greeting'.trParams({
  'name': 'Alice',
  'date': 'April 4th'
});
Text(greeting); // 显示: "Hello, Alice! Today is April 4th."

trPlural 函数

trPlural 函数用于根据给定的数量将文本键翻译为其适当的复数形式。此函数对于处理不同区域设置中的复数形式至关重要。

参数：

  • count: 用于确定翻译复数形式的数字。
  • context: （可选）用于解析区域设置的构建上下文。这用于访问正确的本地化数据。

使用：

Text('money'.trPlural(3))

tr 函数

tr 函数用于根据当前区域设置设置将文本键翻译为本地化的字符串。它支持基本翻译、基于上下文的翻译、带有命名参数的动态字符串格式化以及复数形式。此函数非常适合在 UI 组件（如 Text 小部件）中直接集成本地化。

参数：

  • key: 需要翻译的文本对应的键。
  • context: （可选）用于解析区域设置的构建上下文。
  • namedArgs: （可选）用于翻译内字符串格式化的命名参数映射。
  • count: （可选）用于处理翻译复数形式的整数。

在 Text 小部件中的使用：

// 直接在 Text 小部件中进行基本翻译
Text(tr('hello'))

// 在 Text 小部件中使用上下文进行翻译
Text(tr('hello', context: context))

// 在 Text 小部件中使用命名参数进行翻译
Text(tr('welcome', namedArgs: {'name': 'Alice'}))

// 在 Text 小部件中使用复数形式进行翻译
Text(tr('cats', count: 5))

// 结合命名参数和复数形式在 Text 小部件中进行翻译
// 对于涉及动态数据和复数形式的复杂翻译非常有用。
Text(tr('party_invitation', namedArgs: {'name': 'Alice', 'numberOfGuests': '5'}, count: 5))

处理嵌套 JSON 翻译的文档

目的：

处理嵌套 JSON 结构允许您的本地化系统以分层方式管理复杂的翻译条目。

使用：

嵌套 JSON 示例：

您的 JSON 文件可能包含如下嵌套键：

{
  "settings": {
    "audio": {
      "volume": "Volume",
      "balance": "Balance"
    },
    "display": {
      "brightness": "Brightness",
      "contrast": "Contrast"
    }
  }
}

获取嵌套翻译：

使用点表示法访问嵌套翻译：

Text('settings.audio.volume'.tr()); // 显示: "Volume"

常见问题解答 (FAQ)

以下是关于 Localization Pro 包的一些常见问题的答案：

1. 什么是 Localization Pro？

Localization Pro 是一个 Flutter 包，旨在简化 Flutter 应用程序中多种语言的管理，提供动态语言切换和运行时翻译更新等功能。

2. 如何安装 Localization Pro？

在 pubspec.yaml 文件的依赖部分添加 localization_pro，然后在终端中运行 flutter pub get。

3. 如何在我的项目中使用 Localization Pro？

安装后，在需要使用包的 Dart 文件中导入 import 'package:localization_pro/localization_provider.dart';，定义支持的地区和翻译，并使用提供的 API 来管理翻译和地区更改。

4. 我可以在运行时动态添加翻译吗？

是的，Localization Pro 支持在运行时动态加载和卸载翻译，而无需重启应用程序。

5. 如何使用 Localization Pro 在我的应用中切换语言？

使用 LocalizationManager 提供的 changeLocale 方法来更改语言。这可以通过用户输入或应用程序中的任何事件触发。

6. Localization Pro 是否支持右到左 (RTL) 语言？

是的，它包括对 RTL 语言的全面支持，确保您的应用程序能够无缝处理诸如阿拉伯语和希伯来语等语言。

7. 我应该在哪里存储我的翻译文件？

将翻译文件存储在 assets/locales 目录或其他目录中，但确保在设置 SupportedTranslation 实例时指定了正确的路径。

8. 用于翻译的文件格式是什么？

翻译应存储为 JSON 格式，这是一种结构化且易于管理的方式来处理本地化数据。

9. Localization Pro 是否受到乌兹别克斯坦 Flutter 社区的支持？

是的，该包是在乌兹别克斯坦 Flutter 社区的支持和参与下开发的，确保它符合本地和国际开发者的具体需求和标准。

10. 我如何为 Localization Pro 的开发做出贡献？

欢迎贡献！查看仓库，提交拉取请求或在项目的 GitHub 页面上报告问题和功能请求。

11. 使用 Localization Pro 的性能影响是什么？

该包通过高效的缓存机制和动态加载来设计，以最小化性能影响，确保本地化不会负面影响应用程序的性能。

12. 如何处理复数形式和性别特定的翻译？

Localization Pro 目前需要在 JSON 文件中手动处理复数形式和性别特定的翻译，但我们正在考虑在未来版本中添加更复杂的语言功能。

该 FAQ 部分旨在解答常见问题并帮助开发者充分利用 Localization Pro。有关更多详细文档，请参阅 API 参考部分或包文档。

支持

如有支持需求，请发送邮件至 samandarahadjonov@gmail.com。

许可证

UMD GROUP

完整示例

import 'package:flutter/material.dart';
import 'package:localization_pro/localization_provider.dart';

/// 主应用程序入口点。
/// 初始化本地化管理器并设置支持的语言和地区。
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  List<SupportedTranslation> supportedTranslations = [
    SupportedTranslation(name: '1', paths: {
      const Locale('en', 'US'): 'assets/locales/en_US/1.json',
      const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/1.json',
    }),
    SupportedTranslation(name: '2', paths: {
      const Locale('en', 'US'): 'assets/locales/en_US/2.json',
      const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/2.json',
    }),
    SupportedTranslation(name: '3', paths: {
      const Locale('en', 'US'): 'assets/locales/en_US/3.json',
      const Locale('uz', 'UZ'): 'assets/locales/uz_UZ/3.json',
    })
  ];

  // 运行应用程序并包裹在 LocalizationProvider 中。
  runApp(LocalizationProvider(
      supportedTranslations: supportedTranslations,
      initialLocale: const Locale('uz', 'UZ'),
      initialTranslations: const ['1'],
      debugMode: true,
      child: const MyApp()));
}

/// 应用程序的根小部件。
///
/// 提供 LocalizationProvider 来管理整个应用程序的本地化。
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '动态本地化演示',
      home: HomeScreen(),
    );
  }
}

/// 应用程序的主页，显示各种本地化文本和控件以更改语言。
///
/// 提供交互元素来测试动态本地化功能，如添加、移除翻译和更改区域设置。
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 辅助函数用于创建添加或移除翻译的按钮。
    Widget returnAddOrRemoveButton(String name, {bool isAdd = true}) {
      return TextButton(
          onPressed: () {
            if (isAdd) {
              context.reloadTranslations();
              context.reloadTranslation(name);
              context.addTranslation(name);
            } else {
              context.removeTranslation(name);
            }
          },
          child: Text('${isAdd ? '+' : '-'} $name'));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(
            'app_title'.tr(context)), // 当前区域设置中的翻译标题。
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('(1) 标题: ${'title'.tr()}'), // 翻译后的字符串。
            Text('(1) ${'make.plove.not.war'.tr()}'), // 翻译后的字符串。
            Text('(1) ${tr('one.a.b.c', namedArgs: {'name': "Shavkat"})}'),
            const SizedBox(height: 20),
            Text('(2) ${'two'.tr()}'),
            Text('(2) ${tr('money', count: 3, namedArgs: {'name': "Salom"})}'),

            const SizedBox(height: 40),
            Text('添加'.tr()), // 部分标题。
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                returnAddOrRemoveButton('1'),
                returnAddOrRemoveButton('2'),
              ],
            ),
            const SizedBox(height: 20),
            Text('移除'.tr()), // 部分标题。
            // 移除翻译的按钮。
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                returnAddOrRemoveButton('1', isAdd: false),
                returnAddOrRemoveButton('2', isAdd: false),
              ],
            ),
            const SizedBox(height: 40),
            // 更改整个应用程序区域设置的按钮。
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () => context.changeLocale(const Locale('uz', 'UZ')),
                  child: Text('乌兹别克语'.tr()),
                ),
                ElevatedButton(
                  onPressed: () => context.changeLocale(const Locale('en', 'US')),
                  child: Text('英语'.tr()),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter本地化管理插件localization_pro的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地化管理插件localization_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用localization_pro插件进行本地化管理的详细代码示例。localization_pro是一个强大的Flutter本地化插件，它可以帮助你轻松地管理和使用多个语言资源。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加localization_pro依赖：

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

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

步骤 2: 创建语言资源文件

在你的项目根目录下创建一个assets/locales文件夹，并在其中创建语言资源文件。例如，创建en.json和zh.json文件：

assets/locales/en.json

{
  "app_name": "My App",
  "hello_world": "Hello, World!"
}

assets/locales/zh.json

{
  "app_name": "我的应用",
  "hello_world": "你好，世界！"
}

步骤 3: 配置pubspec.yaml

在pubspec.yaml文件中添加资源文件的配置：

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

步骤 4: 初始化LocalizationPro

在你的main.dart文件中初始化LocalizationPro：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocalizationProvider(
      supportedLocales: [Locale('en'), Locale('zh')],
      onLocaleChanged: (Locale locale) {
        // Handle locale change if needed
      },
      builder: (context, locale) {
        return MaterialApp(
          title: LocalizationPro.of(context).translate('app_name'),
          locale: locale,
          supportedLocales: [Locale('en'), Locale('zh')],
          localizationsDelegates: [
            LocalizationPro.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      },
      initialLocale: Locale('en'), // 默认语言
      loadLocaleFromAssets: true,
      assetPath: 'assets/locales/', // 资源文件路径
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocalizationPro.of(context).translate('app_name')),
      ),
      body: Center(
        child: Text(LocalizationPro.of(context).translate('hello_world')),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换语言示例
          final locale = LocalizationPro.of(context).locale;
          LocalizationPro.of(context).setLocale(
            locale.languageCode == 'en' ? Locale('zh') : Locale('en'),
          );
        },
        tooltip: 'Switch Language',
        child: Icon(Icons.translate),
      ),
    );
  }
}

步骤 5: 运行应用

现在，你可以运行你的Flutter应用。应用启动时会默认显示英文内容，点击浮动按钮可以切换到中文，反之亦然。

总结

以上代码展示了如何在Flutter项目中使用localization_pro插件进行本地化管理。通过简单的配置和初始化，你可以轻松地在应用中实现多语言支持。希望这个示例对你有所帮助！

回到顶部