Flutter国际化插件fluent_i18n的使用

Flutter国际化插件fluent_i18n的使用

为什么选择fluent_i18n？

有时你希望在没有上下文的情况下访问本地化文本，例如在模型类中。这个包使用单例模式加载Fluent Translation List (FTL)文件。你可以无需上下文即可访问本地化字符串（当然，也可以通过上下文访问），它还提供了更方便的方法，减少代码量并使应用程序的所有部分都能本地化。

开始使用

安装

在pubspec.yaml中添加依赖：

dependencies:
  fluent_i18n: <最新版本>

创建文件夹并添加翻译文件，结构如下：

assets
└── i18n
    ├── {languageCode}.ftl                  //仅语言代码
    └── {languageCode}_countryCode}.ftl     //或完整区域代码

例如：

assets
└── i18n
    ├── en.ftl
    └── en_US.ftl

在pubspec.yaml中声明你的资源本地化目录：

flutter:
  assets:
    - assets/i18n/

iOS注意事项

为了使翻译在iOS上生效，你需要在ios/Runner/Info.plist中添加支持的区域设置：

<key>CFBundleLocalizations</key>
<array>
	<string>en</string>
	<string>ja</string>
</array>

配置应用

在应用中添加EasyLocalization小部件，示例如下：

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

const List<Locale> SUPPORTED_LOCALES = [
  const Locale('ja'),
  const Locale('en'),  
];

Locale locale = SUPPORTED_LOCALES.first;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
      locale: locale,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FluentLocalizationsDelegate(SUPPORTED_LOCALES),
      ],
      supportedLocales: SUPPORTED_LOCALES,
    );
  }
}

使用

更改区域设置 setLocale()

你可以通过调用以下方法更改区域设置：

await FluentLocalizations.setLocale(locale);

这将更改当前区域设置并加载相应的FTL文件。

或者，你可以调用（这是setLocale()所做的）：

await FluentLocalizations.ofLocale(locale).load();

翻译 getMessage()

主要的翻译函数是getMessage()，示例如下：

final i18n = FluentLocalizations.current();
Text(i18n.getMessage('home-title')) 

如果你自己维护区域设置，可以使用：

final i18n = FluentLocalizations.ofLocale(currentLocale);
...
// 某处加载
await i18n.load();
...
Text(i18n.getMessage('home-title')) 

提示：不会破坏现有代码，你可以继续使用旧的静态方法FluentLocalizations.of(context)。

完整示例Demo

以下是一个完整的示例，展示了如何使用fluent_i18n进行国际化：

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

import 'strings.dart';  // 假设这是你的字符串文件

const List<Locale> SUPPORTED_LOCALES = [
  const Locale('ja'),
  const Locale('en'),
];

Locale locale = SUPPORTED_LOCALES.first;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (context) => Strings.appTitle,  // 从strings.dart中获取应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
      locale: locale,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FluentLocalizationsDelegate(SUPPORTED_LOCALES),
      ],
      supportedLocales: SUPPORTED_LOCALES,
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Strings.homeTitle),  // 从strings.dart中获取首页标题
      ),
      body: Container(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              Strings.pushedButtonThisManyTimes(_counter),  // 从strings.dart中获取按钮点击次数的文本
              style: Theme.of(context).textTheme.titleLarge,
            ),
            SizedBox(
              height: 20.0,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Language: "),
                DropdownButton<Locale>(
                    value: locale,
                    items: SUPPORTED_LOCALES.map((language) {
                      return DropdownMenuItem(
                        child: Text(language.toString()),
                        value: language,
                      );
                    }).toList(),
                    onChanged: (value) async {
                      if (value != null) {
                        await Strings.applyLocale(value);  // 应用新的区域设置
                        setState(() {
                          locale = value;
                        });
                      }
                    }),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: Strings.increment,  // 从strings.dart中获取增量提示
        child: Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化更美观
    );
  }
}