Flutter中Easy Localization包底部导航栏标签翻译失效问题

在Flutter项目中使用Easy Localization包实现多语言功能，切换语言后，所有界面的翻译均正常生效，但底部导航栏的标签始终保持原语言，无法更新。

底部导航栏的items列表是在State类初始化阶段创建的，'home'.tr()这类翻译方法仅在初始化时执行一次，获取的是当时语言环境下的字符串。当语言切换后，State类不会重新初始化这个列表，build方法只是复用之前已生成的item.label，导致标签文本无法更新为新语言的翻译。

将底部导航栏项的创建逻辑移到build方法内部（或每次build时重新生成），确保语言切换触发界面重建时，能重新调用.tr()方法获取最新翻译。

修改后的主页面代码 #

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  // 移除初始化时的items定义，改为在build中动态生成
  List<BottomNavigationBarItem> _generateNavItems() {
    return [
      BottomNavigationBarItem(
        icon: Image.asset(icons[0]),
        label: 'home'.tr(),
      ),
      BottomNavigationBarItem(
        icon: Image.asset(icons[5]),
        label: 'comments'.tr(),
      ),
      BottomNavigationBarItem(
        icon: Image.asset(icons[1]),
        label: 'settings'.tr(),
      ),
      BottomNavigationBarItem(
        icon: Image.asset(icons[2]),
        label: 'tools'.tr(),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    // 每次build时生成最新的导航项（包含当前语言的翻译）
    final items = _generateNavItems();
    
    return BlocBuilder<MainBloc, MainState>(
      builder: (context, state) {
        return Scaffold(
          bottomNavigationBar: Container(
            color: Colors.white,
            child: Row(
              children: items.asMap().entries.where((element) => 
                state.itemShown![element.key]).map((element) {
                final index = element.key;
                final item = element.value;
                final isSelected = state.actualIndex == index;
                return InkWell(
                  onTap: () {
                    // 保留原有的点击逻辑
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 50.0, top: 16),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected
                            ? ThemeManager.colors
                            : Colors.white,
                        borderRadius: BorderRadius.circular(20.0),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 25, vertical: 15),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Image.asset(
                            icons[index],
                            fit: BoxFit.cover,
                            width: MediaQuery.of(context).size.width / 15,
                            color: isSelected
                                ? Colors.white
                                : Colors.black54,
                          ),
                          Text(
                            item.label!,
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }
}

额外提示 #

检查LocalizationChecker中的语言切换逻辑，当前代码存在逻辑反转问题：选择"English"时会切换到西班牙语，反之切换到英语。如果这不符合预期，需调整条件：

class LocalizationChecker {
  static changeLanguage(BuildContext context, String language) {
    if (language == 'English') {
      EasyLocalization.of(context)!.setLocale(const Locale('en', 'US'));
    } else {
      EasyLocalization.of(context)!.setLocale(const Locale('es', 'ES'));
    }
  }
}

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