Flutter国际化插件split_intl的使用

Flutter国际化插件split_intl的使用

关于

当按照官方指南添加自定义本地化到您的应用时，您会接触到intl包。此包要求您在项目根目录创建一个配置文件，名为l10n.yaml。通常，这个配置文件看起来像这样：

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

这基本上告诉生成器在目录lib/l10n中查找本地化文件，并且模板文件名为app_en.arb（有关更多信息，请参阅"Configuring the l10n.yaml file"）。因此，生成器将查找lib/l10n/app_en.arb并根据您在模板arb文件中指定的值生成名为app_localizations.dart的dart文件。通过在lib/l10n中添加更多具有不同语言代码（arb文件名称末尾的两个字符）的文件，您可以为您的应用程序添加更多本地化，例如app_de.arb用于德语。

但是，通过这种模式，您很快会发现将所有语言的本地化放入单个文件中会极大地降低该文件的可读性。此外，无法向.arb或.json文件添加注释也未必有帮助。

这就是split_intl插件的作用所在。split_intl允许您：

  • 将单个.arb文件拆分为多个.arb、.json或.jsonc文件。
  • 向您的本地化文件中添加注释（通过使用.jsonc格式）。

如何使用split_intl

没有split_intl时，您的项目结构可能看起来像这样：

📦my_localized_flutter_app
 ┣ 📂lib
 ┃ ┣ 📂l10n
 ┃ ┃ ┗ 📜app_en.arb
 ┃ ┗ 📜main.dart
 ┣ 📂linux
 ┣ 📂test
 ┣ 📂windows
 ┣ 📜.gitignore
 ┣ 📜.metadata
 ┣ 📜analysis_options.yaml
 ┣ 📜l10n.yaml
 ┣ 📜pubspec.lock
 ┗ 📜pubspec.yaml

并且lib/l10n/app_en.arb的内容可能如下所示：

{
  "appTitle": "The best app",
  "@appTitle": {
    "description": "The title of the application."
  },
  "fieldRequired": "required",
  "@fieldRequired": {
    "description": "The message for a field that requires user input (cannot be empty)."
  },
  "inputFormOptionsPageTitle": "Add",
  "@inputFormOptionsPageTitle": {
    "description": "The title for the OptionsPage in the InputFormView widget."
  },
  "inputFormPanelPageTitle": "Input values",
  "@inputFormPanelPageTitle": {
    "description": "The title for the PanelPage in the InputFormView widget."
  }
}

但通过使用split_intl，您可以更改结构以使其看起来像这样：

📦my_localized_flutter_app
 ┣ 📂lib
 ┃ ┣ 📂l10n
 ┃ ┃ ┗ 📂en
 ┃ ┃   ┃ .jsonc
 ┃ ┃   ┃ general.arb
 ┃ ┃   ┗ input_form_panel.jsonc
 ┃ ┗ 📜main.dart
 ┣ 📂linux
 ┣ 📂test
 ┣ 📂windows
 ┣ 📜.gitignore
 ┣ 📜.metadata
 ┣ 📜analysis_options.yaml
 ┣ 📜l10n.yaml
 ┣ 📜pubspec.lock
 ┗ 📜pubspec.yaml

lib/l10n/en/.jsonc的内容如下：

{
  // 这是一个注释。
  "fieldRequired": "required",
  "@fieldRequired": {
    "description": "The message for a field that requires user input (cannot be empty)."
  }
}

lib/l10n/en/general.arb的内容如下：

{
  "appTitle": "The best app",
  "@appTitle": {
    "description": "The title of the application."
  },
}

lib/l10n/en/input_form_view.jsonc的内容如下：

{
  // 所有值都由InputFormView小部件使用
  "inputFormOptionsPageTitle": "Add",
  "@inputFormOptionsPageTitle": {
    "description": "The title for the OptionsPage in the InputFormView widget."
  },
  /*
    我喜欢块注释
  */
  "inputFormPanelPageTitle": "Input values",
  "@inputFormPanelPageTitle": {
    "description": "The title for the PanelPage in the InputFormView widget."
  }
  /**
   * 我真的非常喜欢它们
   */
}

split_intl只是将lib/l10n/en中的所有文件合并在一起，并去除所有注释。要添加更多语言，只需添加一个新目录，其名称为语言代码，如lib/l10n/de。生成的文件将输出到lib/l10n中，例如lib/l10n/en -> lib/l10n/app_en.arb。要做到这一点，您只需要运行：

flutter pub run split_intl:generate

此命令生成lib/l10n/app_en.arb文件，该文件可以被

flutter gen-l10n

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

1 回复

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


split_intl 是一个 Flutter 插件，用于帮助开发者更方便地管理和加载国际化资源。它通过将国际化资源分割成多个小文件，按需加载，从而减少应用的初始加载时间和内存占用。以下是如何使用 split_intl 插件的基本步骤：

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 创建国际化资源文件

在 lib 目录下创建一个 l10n 文件夹，并在其中创建国际化资源文件。例如：

lib/
  l10n/
    intl_en.arb
    intl_zh.arb

intl_en.arb 文件内容示例：

{
  "@@locale": "en",
  "title": "Hello World",
  "greeting": "Hello, {name}!"
}

intl_zh.arb 文件内容示例：

{
  "@@locale": "zh",
  "title": "你好世界",
  "greeting": "你好，{name}！"
}

3. 生成国际化代码

使用 flutter pub run split_intl:generate 命令来生成国际化代码。生成的代码将位于 lib/l10n/generated 目录下。

4. 配置 MaterialApp

在 MaterialApp 中配置 split_intl 插件：

import 'package:flutter/material.dart';
import 'package:split_intl/split_intl.dart';
import 'l10n/generated/intl.dart'; // 生成的国际化代码

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        SplitIntl.delegate,
        ...GlobalMaterialLocalizations.delegates,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('zh', 'CN'),
      ],
      home: MyHomePage(),
    );
  }
}

5. 使用国际化字符串

在应用中使用生成的国际化字符串：

import 'package:flutter/material.dart';
import 'l10n/generated/intl.dart'; // 生成的国际化代码

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Intl.of(context).title),
      ),
      body: Center(
        child: Text(Intl.of(context).greeting(name: 'Flutter')),
      ),
    );
  }
}
回到顶部