Flutter DropdownButton返回页面后选中值重置问题排查

问题根源 #

你当前的实现把下拉框的选中值存在了Widget的本地状态selectedValue里，并且初始值固定设为'English'。每次返回再进入页面时，TranslationMode组件会被重新创建，本地状态selectedValue也会被重置为初始的'English'——但Bloc里保存的实际翻译模式状态是正确的，这就导致了显示值和实际状态不一致的问题。

另外，你虽然用了BlocBuilder监听状态变化，但没有把Bloc中保存的当前翻译模式同步到下拉框的显示值上，只是在点击选项时更新本地状态，页面重建后本地状态丢失，自然显示回默认值。

修复方案 #

核心思路是：让下拉框的显示值完全依赖Bloc的状态，不再依赖本地状态，确保页面重建时能从Bloc获取最新的选中状态。

步骤1：确保Bloc状态包含当前翻译模式

首先要确认你的QuranThemeState类里有一个保存当前翻译模式的字段，比如：

class QuranThemeState {
  final String currentTranslationMode;
  // 其他字段...

  QuranThemeState({
    this.currentTranslationMode = 'English', // 给默认值
    // 其他参数...
  });

  // 状态拷贝方法...
}

步骤2：修改TranslationMode组件的实现

去掉本地状态的selectedValue，直接在BlocBuilder中使用Bloc状态的值：

class _TranslationModeState extends State<TranslationMode> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Translation mode'),
          DropdownButtonHideUnderline(
            child: BlocBuilder<QuranThemeBloc, QuranThemeState>(
              builder: (context, state) {
                // 从Bloc状态获取当前翻译模式，默认值为English
                final currentMode = state.currentTranslationMode ?? 'English';
                return DropdownButton(
                  value: currentMode,
                  items: [
                    DropdownMenuItem(child: Text('English'), value: "English"),
                    DropdownMenuItem(child: Text('Urdu'), value: "Urdu"),
                  ],
                  onChanged: (value) {
                    // 只需要通知Bloc更新状态，Bloc状态变化会自动触发重建
                    BlocProvider.of<QuranThemeBloc>(context).add(
                      SwitchTranslationMode(value!),
                    );
                  },
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

额外建议 #

如果需要让翻译模式在App重启后依然保持，记得在QuranThemeBloc的初始化逻辑中，从本地存储（比如SharedPreferences）读取之前保存的翻译模式，初始化到状态里。

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