Flutter国际化插件flutter_i18next的使用

Flutter国际化插件flutter_i18next的使用

简介

flutter_i18next 是一个为 Flutter 提供 i18next 支持的包。它基于 flutter_i18n 进行了大量修改和简化。

使用

1. 添加依赖 首先，在 pubspec.yaml 文件中添加 flutter_i18next 依赖：

   dependencies:
     flutter_i18next: ^0.3.0
   

2. 配置本地化代理 在应用的 MaterialApp 中添加 I18NextDelegate：

   import 'package:flutter/material.dart';
   import 'package:flutter_i18next/i18next.dart';
   
   void main() {
     WidgetsFlutterBinding.ensureInitialized();
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return I18NextLocaleBuilder(
         defaultLocale: Locale('en'),
         builder: (context, locale) => MaterialApp(
           title: 'Flutter Demo',
           theme: ThemeData(
             primarySwatch: Colors.blue,
           ),
           locale: locale,
           supportedLocales: [
             Locale('en'),
             Locale('fa'),
           ],
           home: MyHomePage(),
           localizationsDelegates: [
             I18NextDelegate(
               translationLoader: FileTranslationLoader(
                 useCountryCode: false,
                 basePath: 'assets/i18n',
               ),
               interpolationOptions:
                   InterpolationOptions(formatter: (value, format, locale) {
                 if (format == 'uppercase') {
                   return value.toString().toUpperCase();
                 }
                 return value;
               }),
             ),
             GlobalMaterialLocalizations.delegate,
             GlobalWidgetsLocalizations.delegate
           ],
         ),
       );
     }
   }
   

3. 获取翻译 可以通过 BuildContext 的扩展方法或直接使用 I18Next 类来获取翻译：

   I18Next.t(context, 'label.main')
   // 或者
   context.t('label.main')
   

访问键

你可以传递普通键或深度键，并设置默认值和回退键来检索翻译：

I18Next.t(context, 'deep.key', defaultValue: 'value', fallbackKeys: ['key1', 'key2'])

当前不支持命名空间。

插值

仅支持 i18next 的基本插值功能：

I18Next.t(context, 'key', params: {'param': 'value'})

格式化

可以提供 InterpolationOptions 实例来处理格式化：

I18NextDelegate(
  interpolationOptions:
      InterpolationOptions(formatter: (value, format, locale) {
    if (format == 'uppercase') {
      return value.toString().toUpperCase();
    } else if (value is DateTime) {
      return DateFormat(format).format(value);
    }
    return value;
  }),
)

复数形式

目前只支持单数和复数键：

I18Next.t('key', count: 2)

区间复数形式和多复数形式的语言尚未支持。

语言切换

可以使用 I18NextLocaleBuilder 来处理语言切换。首先，将应用包裹在 I18NextLocaleBuilder 中：

I18NextLocaleBuilder(
  defaultLocale: Locale('en'),
  builder: (context, locale) => MaterialApp(
    locale: locale,
    // 其他配置...
  ),
)

现在可以通过以下方式更改语言：

I18NextLocaleBuilder.of(context).locale = Locale('en');
// 或者
context.locale = Locale('en');

指定的语言应包含在应用的 supportedLocales 中，MaterialApp 会负责加载翻译并改变应用程序方向。

完整示例

以下是完整的示例代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_i18next/i18next.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return I18NextLocaleBuilder(
      defaultLocale: Locale('en'),
      builder: (context, locale) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        locale: locale,
        supportedLocales: [
          Locale('en'),
          Locale('fa'),
        ],
        home: MyHomePage(),
        localizationsDelegates: [
          I18NextDelegate(
            translationLoader: FileTranslationLoader(
              useCountryCode: false,
              basePath: 'assets/i18n',
            ),
            interpolationOptions:
                InterpolationOptions(formatter: (value, format, locale) {
              if (format == 'uppercase') {
                return value.toString().toUpperCase();
              }
              return value;
            }),
          ),
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate
        ],
      ),
    );
  }
}

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

class MyHomeState extends State<MyHomePage> {
  int clicked = 0;

  void incrementCounter() {
    setState(() {
      clicked++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('I18Next'),
        centerTitle: false,
      ),
      body: Builder(builder: (BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(I18Next.t(context, 'label.main', params: {'user': 'Test'})),
              Text(context.t('clicked.times', count: clicked)),
              TextButton(
                onPressed: () async {
                  incrementCounter();
                },
                child: Text(I18Next.t(context, 'button.label.clickMe')),
              ),
              TextButton(
                onPressed: () async {
                  context.locale = context.locale == Locale('en')
                      ? Locale('fa')
                      : Locale('en');
                },
                child: Text(I18Next.t(context, 'button.label.language')),
              ),
            ],
          ),
        );
      }),
    );
  }
}