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

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

这个包简化了您的应用或包的国际化过程。

目录

• 介绍
• 如何安装
• 如何实现
• 国际化一个包
• 定制国际化包

介绍

这个包简化了您的应用或包的国际化过程。

如何安装

在pubspec.yaml文件中添加依赖。

dependencies:
  simple_localization: ^2.0.0

在源代码中导入包。

import 'package:simple_localization/simple_localization.dart';

如何实现

要开始国际化您的应用或包，创建一个继承自SimpleLocalizations的类。

建议您声明一个包含消息名称的枚举。您可以使用任何类型，但使用枚举可以更容易地找到使用特定消息的地方。

以下是一个类的示例。

/// 包含将使用的消息名称的枚举
enum WidgetMessages { message1, message2 }

/// 国际化类。
class ExampleLocalizations extends SimpleLocalizations {
  
  /// 声明`of`方法以获取当前语言的消息。
  static ExampleLocalizations of(BuildContext context) {
    return SimpleLocalizations.of<ExampleLocalizations>(context, (locale) => ExampleLocalizations(locale));
  }

  /// 标准构造函数。
  ExampleLocalizations(Locale locale) : super(locale);

  /// 在设备语言不在支持的语言列表中时使用的默认语言。
  [@override](/user/override)
  Locale get defaultLocale => Locale('en');

  /// 支持的语言列表。
  [@override](/user/override)
  Iterable<Locale> get suportedLocales => [
    Locale('en'),
    Locale('es'),
    Locale('pt'),
  ];

  /// 用各自语言中的消息声明语言
  [@override](/user/override)
  Map<String, Map<dynamic, String>> get localizedValues => {
    'en': {
      WidgetMessages.message1: 'First message',
      WidgetMessages.message2: 'Second message',
    },
    'es': {
      WidgetMessages.message1: 'Primer mensaje',
      WidgetMessages.message2: 'Segundo mensaje',
    },
    'pt': {
      WidgetMessages.message1: 'Primeira mensagem',
      WidgetMessages.message2: 'Segunda mensagem',
    }
  };

}

以下是如何根据当前语言获取消息的示例。

Text(ExampleLocalizations.of(context)[WidgetMessages.message1]);

在被国际化的应用或使用国际化包的应用中，必须在MaterialApp的supportedLocales属性中告知支持的语言，并且还需要在pubspec.yaml中添加flutter_localizations依赖。

以下是添加依赖的示例。

dependencies:
  flutter_localizations:
    sdk: flutter

以下是告知应用支持的语言的示例。

MaterialApp(
  supportedLocales: [
    Locale('en'),
    Locale('es'),
    Locale('pt')
  ],
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
)

国际化一个包

这些实现仅在您希望允许使用您包的应用修改消息时才需要。

要国际化您的包，首先需要创建国际化的类，如上所述，之后需要创建一个附加类，以便使用您包的应用可以修改默认消息。

以下是实现类的示例。

/// 默认情况下，此类的名称将是国际化类的名称与文本'Delegate'的组合，可以与具有国际化类实现的同一文件在同一文件中。
class ExampleLocalizationsDelegate extends SimpleLocalizationsDelegate<ExampleLocalizations> {

	const ExampleLocalizationsDelegate() : super();

	[@override](/user/override)
	ExampleLocalizations initializeLocalization(Locale currentLocale) {
		return ExampleLocalizations(currentLocale);
	}

}

当发布您的包供其他应用修改国际化的消息时，应导出国际化类，例如本例中的ExampleLocalizations和ExampleLocalizationsDelegate类。

定制国际化包

在这个部分，您将看到如何使用simple_localization包定制一个已经具有国际化的包。

在定制包的国际化之前，您需要向pubspec.yaml添加flutter_localizations依赖，如下面的示例所示。

dependencies:
  flutter_localizations:
    sdk: flutter

添加依赖后，在您的应用中创建一个包含必要的修改的类，该类应该继承包的标准国际化类。

class CustomExampleLocalizations extends ExampleLocalizations {

  /// 获取操作符以在`MaterialApp`中获取要使用的委托
  static CustomExampleLocalizationsDelegate get delegate => CustomExampleLocalizationsDelegate();

  /// 标准构造函数
  CustomLocalization(Locale locale) : super(locale);

  /// 用将被修改的各自语言中的消息声明语言
  [@override](/user/override)
  Map<String, Map<dynamic, String>> get customValues => {
    'en': {
      WidgetMessages.message1: 'Custom first message',
      WidgetMessages.message2: 'Custom second message',
    },
    'es': {
      WidgetMessages.message1: 'Primer mensaje personalizado',
      WidgetMessages.message2: 'Segundo mensaje personalizado',
    },
    'pt': {
      WidgetMessages.message1: 'Primeira mensagem personalizada',
      WidgetMessages.message2: 'Segunda mensagem personalizada',
    }
  };
}

class CustomExampleLocalizationsDelegate extends CustomExampleLocalizations {

	const CustomExampleLocalizationsDelegate() : super();

	[@override](/user/override)
	ExampleLocalizations initializeLocalization(Locale currentLocale) {
		return CustomExampleLocalizations(currentLocale);
	}

}

创建了定制类后，您需要告知MaterialApp它应该使用定制类进行国际化，见下面的例子。

MaterialApp(
  localizationsDelegates: [
    /// 告知默认的Flutter本地化
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    /// 告知定制的本地化
    CustomExampleLocalizations.delegate,
  ],
)

示例代码

import 'dart:ui';
import 'package:simple_localization_example/localizations/example_localization.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/material.dart';

class MainApp extends StatefulWidget {

	const MainApp({Key? key}) : super(key: key);

	[@override](/user/override)
	State<StatefulWidget> createState() => _MainAppState();

}

class _MainAppState extends State<MainApp> {

	Locale _locale = window.locale;
	Locale get locale => _locale;

	[@override](/user/override)
	Widget build(BuildContext context) {

		return MaterialApp(
			locale: _locale,
			onGenerateTitle: (context) =>
				ExampleLocalizations.of(context)[ExampleLocalizationsEnums.appBarTitle],
			localizationsDelegates: const [
				// ExampleLocalizationsDelegate(),
				GlobalMaterialLocalizations.delegate,
				GlobalCupertinoLocalizations.delegate,
				GlobalWidgetsLocalizations.delegate,
			],
			supportedLocales: const [
				Locale('en', ''),
				Locale('es', ''),
				Locale('pt', ''),
			],
			theme: ThemeData(
				brightness: Brightness.dark,
				primarySwatch: Colors.blue,
			),
			home: Builder(
				builder: buildHome
			),
		);

	}

	Widget buildHome(BuildContext context) {

		return Scaffold(
			appBar: AppBar(
				title: Text(ExampleLocalizations.of(context)[ExampleLocalizationsEnums.appBarTitle]),
				centerTitle: true,
			),
			body: Padding(
				padding: const EdgeInsets.all(20),
				child: Column(
					mainAxisAlignment: MainAxisAlignment.center,
					children: <Widget>[
						Padding(
							padding: const EdgeInsets.only(bottom: 20),
							child: Text(ExampleLocalizations.of(context)[ExampleLocalizationsEnums.bodyTitle], style: Theme.of(context).textTheme.headline3,),
						),
						Padding(
							padding: const EdgeInsets.only(bottom: 20),
							child: Text(ExampleLocalizations.of(context)[ExampleLocalizationsEnums.bodyDescription], style: Theme.of(context).textTheme.headline4, textAlign: TextAlign.center,),
						),
						ElevatedButton(
							style: const ButtonStyle(
								tapTargetSize: MaterialTapTargetSize.padded
							),
							child: Text(ExampleLocalizations.of(context)[ButtonsLocalizationsEnums.en]),
							onPressed: () => changeLocale(const Locale('en')),
						),
						ElevatedButton(
							style: const ButtonStyle(
								tapTargetSize: MaterialTapTargetSize.padded
							),
							child: Text(ExampleLocalizations.of(context)[ButtonsLocalizationsEnums.es]),
							onPressed: () => changeLocale(const Locale('es')),
						),
						ElevatedButton(
							style: const ButtonStyle(
								tapTargetSize: MaterialTapTargetSize.padded
							),
							child: Text(ExampleLocalizations.of(context)[ButtonsLocalizationsEnums.pt]),
							onPressed: () => changeLocale(const Locale('pt')),
						),
					],
				),
			),
		);

	}

	void changeLocale(Locale newLocale) {
		setState(() {
			_locale = newLocale;
		});
	}

}

void main() => runApp(const MainApp());