Flutter 中使用 Intl 插件实现一键切换语言
要在 Flutter 中使用 Intl 插件进行一键切换语言,您需要执行以下步骤:
-
在
pubspec.yaml文件中添加 Intl 插件的依赖项。 -
创建一个'locale' 文件夹,其中包含所有支持的语言的本地化资源文件。对于每个语言,都需要创建一个本地化资源文件。
-
在
MaterialApp中设置locale和supportedLocales属性。supportedLocales属性应该是一个包含应用程序支持的所有语言的列表。 -
使用 Intl 库中的翻译函数来翻译您的应用程序字符串。这些函数接受一个字符串和一个
Locale对象,以确定应该使用哪种语言进行翻译。 -
创建一个语言切换按钮,并将其与一个函数绑定。该函数应该更新应用程序的
locale状态,并重新构建应用程序。
以下是一个简单的示例代码:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Locale _locale = Locale('en', 'US');
void _changeLanguage(Locale locale) {
setState(() {
_locale = locale;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
// 添加 Intl 插件的本地化代理
AppLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'),
const Locale('zh', 'CN'),
],
locale: _locale,
// 使用 Intl 插件的翻译函数翻译字符串
home: Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context).translate('title')),
),
body: Center(
child: Text(AppLocalizations.of(context).translate('message')),
),
),
// 创建语言切换按钮
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_locale.languageCode == 'en') {
_changeLanguage(Locale('zh', 'CN'));
} else {
_changeLanguage(Locale('en', 'US'));
}
},
tooltip: 'Change Language',
child: Icon(Icons.language),
),
);
}
}
// 创建本地化资源类
class AppLocalizations {
static const LocalizationsDelegate<AppLocalizations> delegate =
_AppLocalizationsDelegate();
final Locale locale;
AppLocalizations(this.locale);
static AppLocalizations of(BuildContext context) {
return Localizations.of<AppLocalizations>(context, AppLocalizations);
}
Map<String, String> _localizedStrings;
Future<bool> load() async {
String jsonString =
await rootBundle.loadString('locale/${locale.languageCode}.json');
Map<String, dynamic> jsonMap = json.decode(jsonString);
_localizedStrings =
jsonMap.map((key, value) => MapEntry(key, value.toString()));
return true;
}
String translate(String key) {
return _localizedStrings[key];
}
}
// 创建本地化代理类
class _AppLocalizationsDelegate
extends LocalizationsDelegate<AppLocalizations> {
const _AppLocalizationsDelegate();
@override
bool isSupported(Locale locale) {
return ['en', 'zh'].contains(locale.languageCode);
}
@override
Future<AppLocalizations> load(Locale locale) async {
AppLocalizations localizations = AppLocalizations(locale);
await localizations.load();
return localizations;
}
@override
bool shouldReload(_AppLocalizationsDelegate old) => false;
}
这段代码创建了一个带有语言切换按钮的 Flutter 应用程序。当用户点击按钮时,应用程序将在英语和中文之间切换。该应用程序使用 Intl 插件的翻译函数来翻译 title 和 message 字符串。该应用程序包含两个本地化资源文件:en.json 和 zh.json。在应用程序启动时,它将加载与当前 locale 匹配的本地化资源文件。
原文地址: https://www.cveoy.top/t/topic/nh3D 著作权归作者所有。请勿转载和采集!