Flutter国际化插件gettext的使用

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

Flutter国际化插件 gettext 的使用

在Flutter项目中实现国际化,可以使用 dart_gettext 插件。它是一个Dart实现的 gettext 框架,支持多语言、上下文、复数形式等特性,并且与Flutter兼容。

特性

  • 支持域(domains)、上下文(contexts)和复数形式(plurals)
  • 内置了136种语言的复数形式
  • 可以动态更改语言或域
  • 对于内部错误(如缺少翻译),会发出事件

使用方法

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  gettext: ^0.1.0
  flutter_gettext: ^0.1.0

然后运行 flutter pub get 来安装这些包。

2. 加载翻译文件

JSON 文件加载示例

假设你有一个JSON格式的翻译文件 en_US.json,内容如下:

{
  "charset": "utf-8",
  "headers": {
    "mime-version": "1.0",
    "content-type": "text/plain; charset=utf-8",
    "content-transfer-encoding": "8bit",
    "language": "es-ES",
    "plural-forms": "nplurals=2; plural=(n!=1);"
  },
  "translations": {
    "": {
      "Hello": {
        "msgid": "Hello",
        "comments": {
           "translator": "Normal string"
        },
        "msgstr": [
           "Hola"
        ]
      },
      "An apple": {
        "msgid": "1 apple",
        "comments": {
           "translator": "Plural string"
        },
        "msgstr": [
           "una manzana",
           "%d manzanas"
        ]
      }
    }
  }
}

你可以通过以下代码加载这个文件:

import 'dart:convert';
import 'dart:io';
import 'package:gettext/gettext.dart';

void main() async {
  final data = await File("./en_US.json").readAsString();

  final gt = Gettext();
  gt.addLocale(json.decode(data));

  print(gt.gettext("Hello")); // 输出:Hola
  print(gt.ngettext("An apple", "%d apples", 1)); // 输出:una manzana
  print(gt.ngettext("An apple", "%d apples", 3)); // 输出:3 manzanas
}

.mo 或 .po 文件加载示例

如果你有 .mo.po 格式的翻译文件,可以使用 gettext_parser 包来解析它们:

import 'package:gettext/gettext.dart';
import 'package:gettext_parser/gettext_parser.dart' as gettextParser;

void loadTranslations() async {
  final data = await File("./en_US.mo").readAsString();

  final gt = Gettext();
  gt.addLocale(gettextParser.mo.parse(data));
}

3. 在Flutter应用中使用

为了在Flutter应用中使用 gettext,你需要使用 flutter_gettext 包。下面是一个完整的Flutter示例:

import 'package:flutter/material.dart';
import 'package:gettext/gettext.dart';
import 'dart:convert';
import 'dart:io';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 加载翻译文件
  final data = await File("./en_US.json").readAsString();
  final gt = Gettext();
  gt.addLocale(json.decode(data));

  runApp(MyApp(gt: gt));
}

class MyApp extends StatelessWidget {
  final Gettext gt;

  MyApp({required this.gt});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(gt: gt),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Gettext gt;

  MyHomePage({required this.gt});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gettext Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(gt.gettext("Hello")),
            Text(gt.ngettext("An apple", "%d apples", 1)),
            Text(gt.ngettext("An apple", "%d apples", 3)),
          ],
        ),
      ),
    );
  }
}

4. 更改语言和域

你可以随时更改当前的语言环境或域:

// 更改语言
gt.locale = "es_ES";

// 更改默认域
gt.domain = "types";

5. API

以下是 gettext 提供的主要API:

  • addLocale(Map<String, dynamic> locale, {String domain: 'messages'})
  • addTranslations(String localeName, Map<String, dynamic> translations, {String domain: 'messages'})
  • setCatalog(String localeName, Catalog catalog)
  • gettext(String msgid, {String domain, String context}) → String
  • ngettext(String msgid, String msgplural, int count, {String domain, String context}) → String

以上就是关于如何在Flutter应用中使用 gettext 插件进行国际化的完整指南。希望对你有所帮助!


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

1 回复

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


在Flutter项目中实现国际化(i18n)时,gettext 插件是一个非常实用的工具。它允许你通过简单的键值对方式来管理不同语言的字符串资源。以下是如何在Flutter项目中配置和使用 gettext 插件的详细步骤,包括代码示例。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  gettext: ^0.4.0  # 请检查最新版本号
  gettext_flutter: ^0.20.0  # 请检查最新版本号

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

2. 配置 gettext

在你的项目中创建一个 locales 文件夹,用于存放翻译文件。假设我们要支持英语(en)和中文(zh),可以创建以下文件结构:

locales/
  en.yaml
  zh.yaml

en.yaml 中添加内容:

welcome_message: "Welcome to our app!"
goodbye_message: "Goodbye!"

zh.yaml 中添加对应的中文翻译:

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

3. 初始化 gettext

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

import 'package:flutter/material.dart';
import 'package:gettext/gettext.dart';
import 'package:gettext_flutter/gettext_flutter.dart';

import 'locales/en.dart' as en;
import 'locales/zh.dart' as zh;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化 gettext
    final Gettext localization = Gettext()
      ..addLocale(Locale('en', 'US'), en.translations)
      ..addLocale(Locale('zh', 'CN'), zh.translations)
      ..setDefaultLocale(Locale('en', 'US'));

    // 使用 MaterialApp 并设置 localizationsDelegates 和 supportedLocales
    return MaterialApp(
      title: 'Flutter i18n Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: MyHomePage(localization: localization),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final Gettext localization;

  MyHomePage({required this.localization});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Locale? currentLocale;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.localization.translate('welcome_message')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(widget.localization.translate('welcome_message')),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  currentLocale = Locale('zh', 'CN');
                  S.load(Locale('zh', 'CN'));
                });
              },
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  currentLocale = Locale('en', 'US');
                  S.load(Locale('en', 'US'));
                });
              },
              child: Text('切换到英文'),
            ),
            Text(widget.localization.translate('goodbye_message')),
          ],
        ),
      ),
    );
  }
}

注意:由于 gettext 插件的更新,具体的初始化代码可能会有所不同。如果上述代码有出入,请参考 gettext 插件的最新文档。

4. 使用翻译

在你的应用中使用 S.of(context).translate('key') 来获取翻译后的字符串。例如:

Text(S.of(context).translate('welcome_message')),

5. 运行应用

运行你的Flutter应用,你应该能够看到默认的英文翻译。点击按钮可以切换到中文翻译。

注意事项

  • 确保你的翻译文件正确无误,并且键名一致。
  • 根据你的项目需求,可能需要添加更多的语言和翻译文件。
  • gettext 插件可能会随着版本更新而变化,请参考最新的官方文档以获取最新的使用方法。

通过上述步骤,你应该能够在Flutter项目中成功集成和使用 gettext 插件来实现国际化。

回到顶部