Flutter

最近更新时间:2026-02-05 11:43:21

我的收藏
TUIKit Flutter 默认自带 简体中文/繁体中文/英文/日语/韩语/阿拉伯语 语言包,作为界面展示语言,通过简单的配置,开发者可以轻松实现语言的动态切换。
简体中文
繁体中文
英文
日语
韩语
阿拉伯语







使用自带语言

配置语言

按照 TUIKit Flutter 里的集成步骤集成组件后,可以使用 LocaleProviderAtomicLocalizations 配置国际化语言。需要在您的应用的主入口使用 MultiProvider 包装,并在 MaterialApp 中做如下配置,可以参考 demo 实现:

@override
Widget build(BuildContext context) {
return ComponentTheme(
child: MultiProvider(
providers: [
// 切换语言的 provider,可监听语言变化并通知组件动态切换语言
ChangeNotifierProvider.value(value: LocaleProvider()),
],
child: Builder(builder: (context) {
final themeState = BaseThemeProvider.of(context);
final isDarkMode = themeState.isDarkMode;
// 获取语言 provider
final localeProvider = Provider.of<LocaleProvider>(context);
return MaterialApp(
// ...... 省略其他配置
localizationsDelegates: const [
AtomicLocalizations.delegate,
// ...... 可以添加其他组件的国际化语言
],
supportedLocales: AtomicLocalizations.supportedLocales, // 添加应用支持的语言
locale: localeProvider.locale, // 设置当前语言
);
}),
),
);

跟随系统语言

配置语言后,插件内部会默认跟随系统语言自适应。

实时动态修改

组件的 LocaleProvider提供了切换语言的方法 changeLanguage,并且会把上一次选择的语言缓存在本地,当应用再次启动时可以获取 locale 字段得到前一次选择的语言。
参考 demo 的 设置界面 来实现,获取 LocaleProvider 对象,调用 changeLanguage 方法切换语言:
final localeProvider = Provider.of<LocaleProvider>(context, listen: false);
// 切换语言:英文
localeProvider.changeLanguage('en');
切换语言后,StatefulWidget 界面的State 子类会执行生命周期方法 didChangeDependencies,在该方法中初始化 AtomicLocalizations 对象,并使用自带的国际化词条。
示例代码如下:
class ContactList extends StatefulWidget {
const ContactList({
super.key,
});

@override
State<ContactList> createState() => _ContactListState();
}

class _ContactListState extends State<ContactList> {
late AtomicLocalizations atomicLocale;
// 省略其他代码
@override
void didChangeDependencies() {
super.didChangeDependencies();
// 动态初始化
atomicLocale = AtomicLocalizations.of(context);
}
@override
Widget build(BuildContext context) {
// 根据语言变化,选择 addFriend 词条对应的语言
return Text(atomicLocale.addFriend);
}
}

自定义国际化语言

要实现自定义国际化语言,则需采用 TUIKit Flutter 源码集成 tuikit_atomic_x 组件的方式。

新增语言资源文件

国际化词条存储于 l10n 目录的 .arb 文件中。扩展新语言的核心工作是:创建一个对应语言编码的新 .arb 文件,并完成词条翻译。
创建文件:复制任一现有语言文件,并重命名为 l10n_<语言代码>.arb(例如西班牙语:l10n_es.arb)。
翻译内容:将新文件中的所有词条翻译为对应的目标语言。

然后在组件根目录执行 flutter gen-l10n 命令后,localizations 目录下会增加该语言文件。

locale_provider.dart 中增加西班牙语缓存到本地的逻辑,调用 changeLanguage('es')方法即可切换为西班牙语。


个性化自定义翻译

在 l10n 目录下不同语言资源文件中语言的 key 是相同的,具体内容可以自定义翻译或者增加,然后在组件根目录执行 flutter gen-l10n 命令即可。