Flutter点击按钮后UI未即时更新，对应Widget不显示问题排查

问题根源 #

1. ButtonViewBody中直接读取obs变量的.value，但未用Obx/GetBuilder包裹依赖状态的Widget块，导致状态更新时无法触发组件重建。
2. 按钮内的setState(() {})完全无效——它只会重建按钮自身，无法影响父组件的显示逻辑。

具体修复步骤 #

1. 用Obx包裹状态依赖区域

修改ButtonViewBody中控制Widget1/Widget2显示的部分，通过Obx监听obs变量变化，自动触发重建：

class ButtonViewBody extends GetView<ButtonViewBodyController> {
  const ButtonViewBody({super.key});

  @override
  Widget build(BuildContext context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h),
        child: Form(
          child: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,   
                    children: 
                    [
                      AccidentButton(),
                      SizedBox(width: 12.h),
                      TheftButton(),
                    ]
                  ),
                ),
              ),
              // 用Obx包裹依赖obs状态的组件
              Obx(() {
                return Column(
                  children: [
                    if (controller.showAccidentWidgets.value) Widget1(),
                    if (controller.showTheftWidgets.value) Widget2(),
                  ],
                );
              }),
            ],
          ),
        ),
      );
}

2. 删除按钮中无用的setState

按钮只需调用Controller的方法即可，不需要自身维护状态：
修改TheftButton的onTap：

onTap: () {
  ButtonViewBodyController.to.toggleTheftWidgets();
  // 移除 setState(() {});
},

修改AccidentButton的onTap：

onTap: () {
  ButtonViewBodyController.to.toggleAccidentWidgets();
  // 移除 setState(() {});
},

3. 确保Controller已初始化

在使用ButtonViewBody的页面中，提前初始化Controller：

@override
void initState() {
  super.initState();
  Get.put(ButtonViewBodyController());
}

额外优化建议 #

将两个按钮合并为通用组件，减少重复代码：

class ToggleButton extends StatelessWidget {
  final String text;
  final VoidCallback onTap;

  const ToggleButton({super.key, required this.text, required this.onTap});

  @override
  Widget build(BuildContext context) => InkWell(
        onTap: onTap,
        child: Container(
          width: 130.h,
          height: 31.h,
          decoration: BoxDecoration(
            color: AppColor.primaryEmphasis,
            borderRadius: BorderRadius.circular(200.r),
          ),
          child: Center(
            child: Text(
              text,
              style: Get.textTheme.bodyLarge?.copyWith(
                height: 1,
                fontSize: 16.sp,
                letterSpacing: 0.5,
                fontWeight: FontWeight.w500,
                color: AppColor.monoWhite,
              ),
            ),
          ),
        ),
      );
}

在ButtonViewBody中使用：

children: [
  ToggleButton(
    text: "Accident",
    onTap: () => ButtonViewBodyController.to.toggleAccidentWidgets(),
  ),
  SizedBox(width: 12.h),
  ToggleButton(
    text: "Theft",
    onTap: () => ButtonViewBodyController.to.toggleTheftWidgets(),
  ),
]

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