Flutter国际化翻译插件i18n_translated_text的使用

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

Flutter国际化翻译插件i18n_translated_text的使用

一个扩展文本功能的工具包,通过 flutter_i18n 自动翻译带有 i18n:// 前缀的字符串。

使用

首先,你需要注册你的国际化翻译,参考 flutter_i18n 包 中的说明进行设置。

带有 i18n:// 前缀的文本将由小部件自动翻译。

TranslatedText('i18n://hello_world');

你还可以使用 Text 小部件的所有其他属性。

TranslatedText(
  'i18n://hello_world',
  style: TextStyle(fontSize: 24),
);

许可证

MIT许可证


完整示例Demo

以下是一个完整的示例代码,展示如何在 Flutter 应用程序中使用 i18n_translated_text 插件。

1. 添加依赖项

pubspec.yaml 文件中添加以下依赖项:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_i18n:
  i18n_translated_text:

2. 初始化本地化资源

创建一个 l10n 目录,并在其中创建 app_en.arbapp_zh.arb 文件。例如:

app_en.arb

{
  "@@locale": "en",
  "hello_world": "Hello World"
}

app_zh.arb

{
  "@@locale": "zh",
  "hello_world": "你好,世界"
}

3. 配置 MaterialApp

main.dart 文件中配置 MaterialApp 并使用 flutter_i18nI18n 小部件:

import 'package:flutter/material.dart';
import 'package:flutter_i18n/flutter_i18n.dart';
import 'package:i18n_translated_text/i18n_translated_text.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      localizationsDelegates: [
        I18n.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: I18n.delegate.supportedLocales(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 国际化翻译'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 TranslatedText 翻译文本
            TranslatedText('i18n://hello_world', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用i18n_translated_text插件进行国际化翻译的代码示例。这个插件可以帮助你轻松管理应用的多语言支持。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加i18n_translated_text依赖:

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

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

2. 创建语言文件

接下来,你需要为你的应用创建语言文件。例如,你可以创建en.jsonzh.json文件,分别存储英文和中文的翻译内容。

assets/locales/en.json

{
  "welcome_message": "Welcome to our app!",
  "logout": "Logout"
}

assets/locales/zh.json

{
  "welcome_message": "欢迎来到我们的应用!",
  "logout": "退出登录"
}

3. 配置pubspec.yaml

确保你的语言文件在pubspec.yaml中被正确引用:

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

4. 初始化并加载翻译

在你的main.dart文件或其他合适的初始化位置,你需要加载这些翻译文件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        // 添加翻译委托
        I18nTranslatedText.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''), // 英文
        Locale('zh', ''), // 中文
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late I18nTranslatedText i18n;

  @override
  void initState() {
    super.initState();
    // 加载翻译文件
    i18n = I18nTranslatedText(
      context,
      Locale('en', ''), // 默认语言
      'assets/locales/', // 语言文件路径
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(i18n.translate('welcome_message')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(i18n.translate('logout')),
            ElevatedButton(
              onPressed: () {
                // 切换语言示例
                setState(() {
                  Locale myLocale = Locale('zh', '');
                  I18nTranslatedText.of(context)!.setLocale(myLocale);
                });
              },
              child: Text('Switch to Chinese'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的应用,并看到初始加载的英文翻译。点击按钮后,应用将切换到中文翻译。

总结

这个示例展示了如何使用i18n_translated_text插件在Flutter应用中实现国际化翻译。你可以根据需要扩展这个示例,添加更多的语言和翻译内容。希望这个示例能帮助你更好地理解和实现Flutter应用的国际化。

回到顶部