如何在使用EasyLocalization包的双语言应用中实现按钮切换语言？

步骤说明 #

1. 添加切换语言的按钮组件 #

在需要触发语言切换的页面（比如设置页），添加对应语言的按钮，点击时执行切换逻辑。

2. 实现语言切换核心逻辑 #

通过EasyLocalization.of(context)!.setLocale()方法切换语言，该方法会自动更新应用locale、持久化设置（因为你配置了saveLocale: true），并触发UI重建。

3. 确保文本随语言更新 #

所有多语言文本使用CodegenLoader生成的tr()方法调用，比如tr('welcome')，语言切换后文本会自动刷新。

完整代码示例 #

切换按钮组件

class LanguageSwitcher extends StatelessWidget {
  const LanguageSwitcher({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () async {
            await EasyLocalization.of(context)!.setLocale(const Locale('ar'));
          },
          child: Text(tr('arabic')),
        ),
        const SizedBox(width: 16),
        ElevatedButton(
          onPressed: () async {
            await EasyLocalization.of(context)!.setLocale(const Locale('en'));
          },
          child: Text(tr('english')),
        ),
      ],
    );
  }
}

翻译文件示例（assets/translations/en.json）

{
  "arabic": "Arabic",
  "english": "English",
  "welcome": "Welcome to the app"
}

翻译文件示例（assets/translations/ar.json）

{
  "arabic": "العربية",
  "english": "الإنجليزية",
  "welcome": "مرحبًا في التطبيق"
}

关键注意点 #

• 调用setLocale时必须确保上下文处于EasyLocalization的子树中（你的初始化代码已经将MyApp放在子树内，无需额外处理）。
• saveLocale: true会自动将用户选择的语言保存到本地存储，下次启动应用时直接加载该语言。
• 如果切换后UI未更新，检查是否有组件使用了const修饰导致无法重建，移除不必要的const即可。

内容的提问来源于stack exchange，提问作者Khaled