Flutter国际化插件trans_intl的使用

Flutter国际化插件trans_intl的使用

轻量级国际文本翻译解决方案插件。

开始使用

在你的项目中添加插件：

flutter pub add trans_intl

使用

初始化插件并设置当前语言：

import 'package:trans_intl/trans_intl.dart';

I18nManager.init(current: LangType.EN, trans: TranslationService());

更改语言：

import 'package:trans_intl/trans_intl.dart';

I18nManager.changeLanguage(LangType.FR);

完整示例

以下是一个完整的示例，展示了如何使用trans_intl插件进行国际化。

示例代码

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:trans_intl/trans_intl.dart';

// 定义一个翻译类
class Trans {
  static const String hello = 'Hello World';
}

// 定义一个ID类
class Ids {
  static const String hello = "hello";
}

// 创建一个翻译映射
TranslationMap trans = {
  Ids.hello: {
    LangType.EN: "Hello",
    LangType.CN: "你好",
    LangType.ES: "Hola",
    LangType.FR: "Bonjour",
    LangType.DE: "Hallo"
  },
};

// 创建一个翻译服务类
class TranslationsService extends Translations {
  [@override](/user/override)
  TranslationMap get keys => trans;
}

// 主应用类
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

// 应用状态类
class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 更改语言的方法
  Future<void> _changeLan(LangType type) async {
    await I18nManager.changeLanguage(type);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(Trans.hello.intl),
        ),
        body: Center(
          child: Column(
            children: [
              Text(Trans.hello.intl), // 显示国际化文本
              RawMaterialButton(
                onPressed: () => _changeLan(LangType.EN), // 切换到英语
                child: Text('EN'),
                fillColor: Colors.blue,
              ),
              RawMaterialButton(
                onPressed: () => _changeLan(LangType.CN), // 切换到中文
                child: Text('CN'),
                fillColor: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


trans_intl 是一个用于 Flutter 应用国际化的插件，它可以帮助开发者轻松地管理多语言支持。以下是如何在 Flutter 项目中使用 trans_intl 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  trans_intl: ^1.0.0  # 请使用最新的版本

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

2. 创建语言文件

在项目中创建一个目录来存放语言文件，例如 lib/l10n。在该目录下，创建多个 JSON 文件来表示不同的语言。例如：

  • lib/l10n/en.json (英语)
  • lib/l10n/zh-CN.json (简体中文)

每个 JSON 文件的内容应该是一个键值对，表示不同的文本。例如：

// en.json
{
  "welcome": "Welcome",
  "hello": "Hello, {name}"
}

// zh-CN.json
{
  "welcome": "欢迎",
  "hello": "你好, {name}"
}

3. 初始化 trans_intl

在 lib/main.dart 中初始化 trans_intl，并设置默认语言和支持的语言列表。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await TransIntl.init(
    defaultLocale: 'en',  // 默认语言
    supportedLocales: ['en', 'zh-CN'],  // 支持的语言列表
    path: 'lib/l10n',  // 语言文件路径
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      localizationsDelegates: TransIntl.localizationsDelegates,
      supportedLocales: TransIntl.supportedLocales,
      localeResolutionCallback: TransIntl.localeResolutionCallback,
    );
  }
}

4. 使用 trans_intl 进行文本翻译

在需要使用多语言的地方，使用 TransIntl.of(context) 来获取翻译文本。例如：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(TransIntl.of(context).get('welcome')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(TransIntl.of(context).get('hello', args: {'name': 'Flutter'})),
          ],
        ),
      ),
    );
  }
}

5. 动态切换语言

你可以通过 TransIntl.setLocale(context, locale) 来动态切换语言。例如：

FlatButton(
  onPressed: () {
    TransIntl.setLocale(context, 'zh-CN');  // 切换到简体中文
  },
  child: Text('Switch to Chinese'),
);

6. 处理语言切换事件

如果你希望在语言切换时更新 UI，可以使用 TransIntl.of(context).onLocaleChanged 来监听语言变化。

TransIntl.of(context).onLocaleChanged.listen((locale) {
  // 在这里更新 UI 或其他逻辑
});
回到顶部