Flutter国际化翻译插件l10n_translator的使用

Flutter国际化翻译插件l10n_translator的使用

概述

通过此库包，您的应用程序可以轻松地以多种支持的语言显示其文本。这些翻译存储在易于读取的Map变量中，供开发人员和非开发人员访问。

示例应用

您可以使用此库包附带的示例应用来实现和使用到您的Flutter应用中：

• 示例应用：example

安装

安装此库时，建议使用最新的次要版本或补丁版本，而不是指定的版本号。在pubspec.yaml文件中添加以下依赖项：

dependencies:
  l10n_translator:^1.0.0

文档

查看有关此库的详细文档，可点击下图跳转至Medium文章：

其他Dart包

作者的其他Dart包可以在以下网址找到：

示例代码

以下是使用l10n_translator插件的完整示例代码：

///
///
///
import 'package:example/src/view.dart'; // 导入视图文件

void main() => runApp(const MyApp(key: Key('MyApp'))); // 运行主应用

在这个示例中，我们导入了一个视图文件，并运行了主应用。为了更详细地展示如何使用l10n_translator插件进行国际化翻译，我们将创建一个简单的应用，并配置多语言支持。

创建多语言支持的应用

首先，我们需要定义不同语言的翻译文件。假设我们有英语（en) 和中文 (zh) 的翻译文件。

en.json

{
  "hello": "Hello",
  "welcome": "Welcome to our app!"
}

zh.json

{
  "hello": "你好",
  "welcome": "欢迎使用我们的应用！"
}

接下来，在lib目录下创建一个名为localizations.dart的文件来定义本地化类。

lib/localizations.dart

import 'package:flutter/material.dart';
import 'package:l10n_translator/l10n_translator.dart';

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  static const LocalizationsDelegate<AppLocalizations> delegate = _AppLocalizationsDelegate();

  factory AppLocalizations.delegate(Locale locale) {
    return AppLocalizations(locale);
  }
}

class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  [@override](/user/override)
  bool isSupported(Locale locale) {
    return ['en', 'zh'].contains(locale.languageCode);
  }

  [@override](/user/override)
  Future<AppLocalizations> load(Locale locale) async {
    AppLocalizations localizations = AppLocalizations(locale);
    await initializeTranslations(locale); // 初始化翻译
    return localizations;
  }

  [@override](/user/override)
  bool shouldReload(covariant LocalizationsDelegate<AppLocalizations> old) => false;
}

然后在main.dart中配置多语言支持并使用翻译。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:example/src/view.dart';
import './localizations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('zh', ''),
      ],
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@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(AppLocalizations.of(context).translate('welcome')), // 使用翻译
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(AppLocalizations.of(context).translate('hello')), // 使用翻译
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: AppLocalizations.of(context).translate('increment'), // 使用翻译
        child: Icon(Icons.add),
      ),
    );
  }
}