Flutter本地化管理插件yaml_localizations的使用

Flutter本地化管理插件yaml_localizations的使用

yaml_localizations 是一个用于 Flutter 的最小化 YAML 本地化包。

YAML 是一种人类可读的配置文件格式，具有简洁的语法。它允许你将字符串表示为键值对，除了其他类型外。

YAML 是 Flutter 的 pubspec.yaml 文件使用的格式。

安装

在你的 pubspec.yaml 文件中添加 yaml_localizations 和 flutter_localizations 依赖：

dependencies:
  flutter_localizations:
    sdk: flutter
  yaml_localizations:

添加语言特定的 YAML 文件

为每种支持的语言添加一个 YAML 文件，并将其路径描述在 pubspec.yaml 中。

flutter:
  assets:
    - assets/yaml_translations/

YAML 文件名必须与 supportedLocales 中描述的语言标签匹配。

例如，如果 Locale('en', 'US') 必须有一个对应的 assetPath/en-US.yaml 文件。

添加 localizationDelegates 和 supportedLocales

在 MaterialApp 中添加 YamlLocalizationsDelegate 并设置 supportedLocales 使用语言/国家代码。

MaterialApp(
  localizationsDelegates: [
    // 全局委托
    ...GlobalMaterialLocalizations.delegates,
    // YAML本地化
    YamlLocalizationsDelegate(
      path: 'assets/yaml_translations',
      assetBundle: DefaultAssetBundle.of(context),
    ),
  ],
  supportedLocales: [
    Locale('en', 'GB'),
    Locale('en', 'US'),
    Locale('en'),
    Locale('nb'),
  ],
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: const MyHomePage(),
)

iOS 注意事项

在 ios/Runner/Info.plist 中添加支持的语言，如下所示：

<key>CFBundleLocalizations</key>
<array>
    <string>en-GB</string>
    <string>en</string>
    <string>nb</string>
</array>

YAML 格式

以下是一个 YAML 文件的例子：

Hi: Hi
Text: |
  There once was a tall man from Ealing
  Who got on a bus to Darjeeling
      It said on the door
      "Please don't sit on the floor"
  So he carefully sat on the ceiling
Long: >
  Wrapped text
  will be folded
  into a single
  paragraph

  Blank lines denote
  paragraph breaks

提示：YAML 支持多种表达字符串的方式。使用竖线字符 (|) 表示字符串将跨越多行。使用大于号 (>) 来拆分长行。

API

使用以下方式来翻译字符串：

YamlLocalizations.of(context)?.string('Hi')

你可以通过扩展方法轻松地向 String 类添加功能，如下所示：

extension LocalizedString on String {
  String tr(BuildContext context) => YamlLocalizations.of(context)!.string(this);
}

这样你就可以像这样使用它：

'Hi'.tr(context)

示例

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:yaml_localizations/yaml_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        ...GlobalMaterialLocalizations.delegates,
        YamlLocalizationsDelegate(
            path: 'assets/yaml_translations',
            assetBundle: DefaultAssetBundle.of(context)),
      ],
      supportedLocales: const [
        Locale('en', 'GB'),
        Locale('en', 'US'),
        Locale('en'),
        Locale('nb'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('yaml_localizations'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(YamlLocalizations.of(context)?.string('Hi') ?? ''),
          const SizedBox(height: 12),
          Text(YamlLocalizations.of(context)?.string('Text') ?? ''),
          const SizedBox(height: 12),
          Text(YamlLocalizations.of(context)?.string('Long') ?? ''),
        ],
      ),
    );
  }
}