Flutter国际化插件i18n_extension_core的使用

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

Flutter国际化插件i18n_extension_core的使用

简介

i18n_extension_core 是一个核心 Dart 包，用于 i18n_extension 插件。它主要用于在 Dart 服务器或仅使用 Dart 的代码中进行国际化处理。

在你的Flutter应用中：

不要直接包含这个核心包。相反，请转到 i18n_extension 包，该包已经导出此核心代码，并提供了像 I18n 小部件这样的 Flutter 相关代码，你必须用它来包装你的小部件树。

在你的Dart服务器或仅使用Dart的代码中：

如果你正在为像 Celest 这样的 Dart 服务器（后端）创建代码，或者开发一些不依赖于 Flutter 的纯 Dart 包，那么你可以直接使用这个包：

import 'package:i18n_extension_core/i18n_extension_core.dart';

// 扩展 String 类以支持本地化功能
extension Localization on String {
  // 定义翻译映射
  static var t = Translations.byText("en_us") + 
    {"en_us": "Hello", "pt_br": "Hola"};

  // 获取本地化的字符串
  String get i18n => localize(this, t);
}

// 设置默认语言环境
DefaultLocale.set("es_ES");

// 测试翻译效果
expect("Hello".i18n, "Hola");

注意：当使用 Celest 时，这对于将后端抛出的异常消息翻译到前端特别有用。例如，在后端抛出 MyException('The password you typed is invalid'.i18n); 时，如果用户的设备设置为西班牙语，则会到达前端并被翻译成 MyException('La contraseña que ingresaste no es válida')。

文档

请转到 i18n_extension 阅读文档。使用这个包直接时只有两个不同之处：

  • 在这里你无法访问 I18n 小部件，这是一个 Flutter 小部件。
  • 设置默认语言环境的方法不同。你必须使用 DefaultLocale.set() 静态方法，如上例所示。

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 i18n_extension_core：

import 'package:i18n_extension_core/i18n_extension_core.dart';

void main() {
  // 设置默认语言环境为葡萄牙语
  DefaultLocale.set("pt");

  // 获取本地化的文本
  String text = "Hello World".i18n;
  // 使用参数填充本地化的文本
  String filledText = "%s is %s years old".i18n.fill(["John", 30]);

  print(text); // 输出：Olá Mundo
  print(filledText); // 输出：John tem 30 anos de idade
}

// 扩展 String 类以支持本地化功能
extension Localization on String {
  // 定义翻译映射
  static final _t = Translations.byText("en-US") +
      {
        "en-US": "Hello World",
        "pt": "Olá Mundo",
      } +
      {
        "en-US": "%s is %s years old",
        "pt": "%s tem %s anos de idade",
      };

  // 获取本地化的字符串
  String get i18n => localize(this, _t);

  // 使用参数填充本地化的字符串
  String fill(List<Object> params) => localizeFill(this, params);
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用i18n_extension_core插件来实现国际化的一个简单示例。这个插件允许你轻松地在Flutter应用中管理和切换不同的语言环境。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  i18n_extension_core: ^x.y.z  # 请使用最新版本号替换x.y.z

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

步骤 2: 配置国际化资源

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

locales/en.json

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

locales/zh.json

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

步骤 3: 初始化国际化

在你的main.dart文件中，初始化I18n类并配置语言环境：

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

void main() {
  // 初始化国际化
  I18n.global.fallbackLocale = Locale('en'); // 设置回退语言
  I18n.global.locale = Locale('en'); // 设置默认语言

  // 加载语言文件
  I18n.global.loadLocaleFromAssets(
    baseLocale: 'en',
    fallbackLocale: 'en',
    supportedLocales: ['en', 'zh'],
    path: 'locales/' // 路径相对于assets目录
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      locale: I18n.global.locale, // 设置当前语言环境
      supportedLocales: I18n.global.supportedLocales, // 设置支持的语言环境
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        I18n.delegate // 添加I18n的delegate
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        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> {
  void changeLanguage(Locale locale) {
    setState(() {
      I18n.global.locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(I18n.t('welcome_message')), // 使用国际化文本
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(I18n.t('welcome_message')),
            Text(I18n.t('goodbye_message')),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('zh')),
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('en')),
              child: Text('切换到英文'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 4: 添加资源文件到pubspec.yaml

确保在pubspec.yaml的flutter部分添加你的语言文件路径到assets：

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

总结

通过上述步骤，你已经成功地在Flutter项目中集成了i18n_extension_core插件，并实现了基本的国际化功能。你可以根据需要扩展你的语言文件和文本键，并在应用中自由切换语言环境。

回到顶部