Flutter国际化插件gh_i18n的使用

Flutter国际化插件gh_i18n的使用

该插件可以帮助您在Flutter项目中轻松实现国际化功能。

开始使用

首先，您需要在项目的根目录下创建一个名为 gh_i18n.yaml 的文件。以下是一个示例配置：

# 您希望保存模型的路径
classPath: "./lib/"
# JSON模型的名称
modelNm: "GhI18nLanguage"
# JSON文件的名称
fileNm: "gh_i18n_language"
# JSON文件的位置
jsonPath: "./assets/"
# 包含多语言信息的JSON文件的基础名称
jsonNm: "i18n_json"

接下来，您需要为每种支持的语言创建一个包含多语言信息的JSON文件。例如，如果您的 jsonNm 是 i18n_json 并且您支持韩语和英语，则应在 jsonPath 路径下分别存在 i18n_json_kr.json 和 i18n_json_en.json 文件。

以下是示例：

i18n_json_kr.json

{
  "home" : {
    "count": "@n개",
    "btn_text": "숫자 더하기",
    "text": "버튼을 눌러 숫자를 더해보세요"
  }
}

i18n_json_en.json

{
  "home" : {
    "count": "Count @n",
    "btn_text": "Add Count",
    "text": "You have pushed the button this many times:"
  }
}

然后，在您的项目根目录下运行以下命令：

dart run gh_i18n

这将生成两个文件：gh_i18n_translator.dart 和 gh_i18n_helper.dart。

初始化多语言模块

现在，您可以初始化多语言模块，并将其放在应用程序启动之前。以下是初始化代码示例：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GhTranslatorHelper().initLanguage();
  runApp(const MyApp());
}

使用多语言模型

您可以像下面这样使用类型安全的多语言模型：

Text(
  tl.home?.text ?? '',
),

Text(
  tl.home?.count?.params({'n': '$_counter'}) ?? '',
  style: Theme.of(context).textTheme.headlineMedium,
),

插入变量

params() 函数作为 String 类型的扩展函数提供。您可以在JSON文件中添加带有 @ 标记的变量，并在Dart代码中以映射形式输入这些变量的值。

Text(
  tl.home?.count?.params({'n': '$_counter'}) ?? ''
),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 gh_i18n 插件：

import 'dart:async';

import 'package:example/gh_i18n_helper.dart';
import 'package:flutter/material.dart';
import 'package:gh_i18n/language_type.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GhTranslatorHelper().initLanguage();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool isKr = true;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              tl.home?.text ?? '',
            ),
            Text(
              tl.home?.count?.params({'n': '$_counter'}) ?? '',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 100),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('en'),
                Switch(value: isKr, onChanged: (value) {
                  isKr = value;
                  if (isKr) {
                    GhTranslatorHelper.setLanguageType(LanguageType.ko);
                  } else {
                    GhTranslatorHelper.setLanguageType(LanguageType.en);
                  }
                  setState(() {});
                }),
                const Text('kr'),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}