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

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

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

translate_intl 是一个 Flutter 包,它提供了处理应用程序中翻译和本地化的简单方法。它简化了管理不同语言并显示本地化内容的过程。

特性

  • 本地化翻译:轻松管理和访问多种语言的翻译。
  • 灵活的区域设置管理:动态设置和切换不同的区域设置。
  • 易于翻译的扩展:在整个应用程序中使用简单的扩展来翻译字符串。
  • 自定义本地化委托:使用自定义委托与 Flutter 的本地化系统集成。

开始使用

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any
  translate_inl: ^0.1.0

2. 设置本地化

MaterialApp 中初始化本地化:

import 'package:flutter/material.dart';
import 'package:translate_intl/translate/translate_delegate.dart';
import 'package:translate_intl/translate/translator.dart';
import 'package:translate_intl/translate/translate_locale.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: const [
        Locale('en', 'EN'), // 英语
        Locale('km', 'KH'), // 柬埔寨语
      ],
      locale: const Locale('km'), // 初始区域设置为柬埔寨语
      localizationsDelegates: [
        TranslateDelegate(translator: Message()), // 使用 Message 类进行翻译
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      builder: (context, child) {
        TranslateLocale.initialize(context); // 初始化本地化
        return child!;
      },
      home: const MyPager(), // 主页面
    );
  }
}

3. 定义翻译

创建你的翻译文件,使用 Translator 类和 Localize 类:

class Message extends Translator {
  [@override](/user/override)
  Map<String, Map<String, String>> message() {
    return {
      'en': {'hello': 'Hello'}, // 英语
      'km': {'hello': 'សួស្តី'}, // 柬埔寨语
    };
  }
}

4. 在小部件中使用翻译

在小部件中使用 .tr 扩展来翻译字符串:

class MyPager extends StatefulWidget {
  const MyPager({super.key});

  [@override](/user/override)
  State<MyPager> createState() => _MyPagerState();
}

class _MyPagerState extends State<MyPager> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('hello'.tr), // 显示 "សួស្តី"
      ),
    );
  }
}

使用示例

以下是使用该包的一个快速示例:

import 'package:flutter/material.dart';
import 'package:translate_intl/translate/translate_delegate.dart';
import 'package:translate_intl/translate/translator.dart';
import 'package:translate_intl/translate/translate_locale.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: const [
        Locale('en', 'EN'), // 英语
        Locale('km', 'KH'), // 柬埔寨语
      ],
      locale: const Locale('km'), // 初始区域设置为柬埔寨语
      localizationsDelegates: [
        TranslateDelegate(translator: Message()), // 使用 Message 类进行翻译
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      builder: (context, child) {
        TranslateLocale.initialize(context); // 初始化本地化
        return child!;
      },
      home: const MyPager(), // 主页面
    );
  }
}

class MyPager extends StatefulWidget {
  const MyPager({super.key});

  [@override](/user/override)
  State<MyPager> createState() => _MyPagerState();
}

class _MyPagerState extends State<MyPager> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('hello'.tr), // 显示 "សួស្តី"
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用translate_intl插件来实现国际化的代码示例。

1. 添加依赖

首先,在pubspec.yaml文件中添加translate_intl的依赖:

dependencies:
  flutter:
    sdk: flutter
  translate_intl: ^0.x.x  # 请替换为最新版本号

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

2. 配置arb文件

lib/l10n目录下创建语言文件,例如intl_en_US.arbintl_zh_CN.arb

intl_en_US.arb内容示例:

{
  "welcome_message": "Welcome to our app!",
  "goodbye_message": "Goodbye!"
}

intl_zh_CN.arb内容示例:

{
  "welcome_message": "欢迎来到我们的应用!",
  "goodbye_message": "再见!"
}

3. 生成本地化文件

在项目根目录下运行以下命令来生成本地化文件:

flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/main.dart lib/l10n/intl*.arb

4. 更新main.dart

main.dart中配置MaterialApp以支持本地化,并使用S.of(context)来访问翻译字符串。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_app_name/l10n/messages_all.dart';  // 确保导入的是生成的messages_all.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: [
        // 本地化的委托
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).welcome_message),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(S.of(context).welcome_message),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Message'),
                    content: Text(S.of(context).goodbye_message),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: Text('OK'),
                      ),
                    ],
                  ),
                );
              },
              child: Text('Show Message'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

确保你的设备或模拟器支持所配置的语言,然后在运行时通过系统设置更改语言,或者在应用内动态更改语言。

6. 动态更改语言(可选)

如果你想在应用内动态更改语言,可以创建一个方法来更新Localizations

void changeLanguage(BuildContext context, Locale newLocale) {
  MyApp.of(context).setLocale(newLocale);
}

并在MyApp类中管理Locale

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();

  static _MyAppState of(BuildContext context) {
    return context.rootAncestorStateOfType(TypeMatcher<_MyAppState>());
  }
}

class _MyAppState extends State<MyApp> {
  Locale _locale;

  @override
  void initState() {
    super.initState();
    _locale = Locale('en', 'US'); // 默认语言
  }

  void setLocale(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      locale: _locale,
      home: MyHomePage(),
    );
  }
}

这样,你就可以通过调用changeLanguage方法来动态更改应用的语言了。

希望这个示例能帮助你在Flutter项目中使用translate_intl插件来实现国际化。

回到顶部