Flutter点击onPressed时单选按钮颜色不即时更新如何解决

showModalBottomSheet构建的底部模态弹窗拥有独立的组件上下文，你在弹窗内调用父组件的setState方法，只会触发父组件自身的重绘，不会触发弹窗内容的重绘。所以你点击单选按钮时，selected变量的值其实已经更新了，但弹窗没重新渲染，颜色自然不会变；等你关闭弹窗重新打开时，才会读取最新的selected值渲染出正确的颜色。

• 方案一（推荐）：将弹窗内的单选按钮区域封装为独立的StatefulWidget，把选中状态、点击更新逻辑全部放到这个独立组件内部管理，完全不依赖父组件的setState刷新，封装性更好。
• 方案二：如果需要在弹窗内同步更新父页面状态，可以用StatefulBuilder包裹弹窗内容，拿到弹窗专属的状态刷新方法，点击时同时触发弹窗自身的重绘。

// 弹出底部弹窗的代码
void _showBottomSheet() {
  showModalBottomSheet(
    context: context,
    builder: (sheetContext) {
      return StatefulBuilder(
        builder: (context, sheetSetState) {
          return Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                customRadio("选项1", 0, sheetSetState),
                const SizedBox(height: 12),
                customRadio("选项2", 1, sheetSetState),
              ],
            ),
          );
        }
      );
    }
  );
}

// 修改后的自定义单选按钮组件
Widget customRadio(String text, int index, void Function(void Function()) sheetSetState){
  return OutlinedButton(
    onPressed: () {
      // 先触发弹窗内部重绘，实时更新按钮样式
      sheetSetState((){
        selected = index;
      });
      // 如果父页面其他组件也需要用到selected的值，再调用父组件setState同步
      setState(() {});
    },
    child: Text(
      text, 
      style: TextStyle(
        color: selected == index ? Colors.white : Colors.grey
      ),
    ),
    style: OutlinedButton.styleFrom(
      primary: Colors.white,
      backgroundColor: selected == index ? Colors.deepOrange : Colors.white,
    ),
  );
}

如果你选择独立StatefulWidget的方案，只需要把弹窗内容的Column部分抽成单独的StatefulWidget，在组件内部维护选中状态即可，不需要额外传递setState方法，代码耦合度更低。

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