下拉框变更时Dialog状态未更新的问题排查与解决

问题根源 #

1. 外层setState无法刷新Dialog UI：你当前使用外层Widget的setState更新状态，但showDialog创建的Dialog属于独立Widget树，外层状态更新不会触发Dialog内部UI重建，导致选中下拉框后文本字段无法即时显示。
2. Dialog重启后状态丢失：selectedReason是外层Widget的成员变量，每次调用rejectDialog打开Dialog时，变量会被重置为空字符串，下拉框因此回到初始状态。

修复方案 #

使用StatefulBuilder包裹Dialog内的动态内容，让Dialog拥有独立的状态管理能力，既可以即时响应下拉框的选择变化，又能保证每次打开Dialog时状态独立初始化。

修改后的代码 #

List<String> itemList = ["notMyExpertise", "Alasan lainnya"];

void rejectDialog(
    {required dynamic ticketData,
    required String ticketId,
    required VoidCallback onDeclineConfirmed}) {
  showDialog(
      context: context,
      builder: (context) {
        // 把状态移到Dialog内部，保证每次打开都是独立初始状态
        String selectedReason = '';
        return ReusableConfirmationDialog(
          titleText: 'hello'.tr(),
          contentText: 'hello bro let me try to help you first before '.tr(),
          confirmButtonText: 'sure'.tr(),
          declineButtonText: 'cancel'.tr(),
          onDecline: () {
            Navigator.pop(context);
          },
          onConfirm: onDeclineConfirmed,
          additionalWidget: StatefulBuilder(
            builder: (context, setState) {
              return Column(
                children: [
                  ReusableDropdownButton(
                    itemList: itemList,
                    width: 197,
                    height: 26,
                    // 用StatefulBuilder的setState刷新Dialog内部UI
                    onChanged: (newValue) {
                      setState(() {
                        selectedReason = newValue;
                      });
                    },
                    // 绑定选中值，让下拉框正确显示当前选择
                    value: selectedReason,
                  ),
                  const SizedBox(height: 10),
                  if (selectedReason == 'Alasan lainnya')
                    Container(
                      constraints: const BoxConstraints(minHeight: 78),
                      width: 230,
                      decoration: BoxDecoration(
                        color: othersChatColor,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      padding:
                          const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                      child: TextFormField(
                        controller: ticketTextController,
                        maxLength: 100,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(1000),
                        ],
                        style: primaryColor400Style.copyWith(
                          fontSize: fontSize11,
                        ),
                        maxLines: null,
                        keyboardType: TextInputType.multiline,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.zero,
                          border: InputBorder.none,
                          hintText: 'reasonHint'.tr(),
                          hintStyle: weight400Style.copyWith(
                              color: hintColor, fontSize: fontSize11),
                          counterText: '',
                        ),
                      ),
                    ),
                  const SizedBox(height: 5),
                ],
              );
            },
          ),
        );
      });
}

关键改动说明 #

• 将selectedReason移至showDialog的builder内部，确保每次打开Dialog时状态独立初始化，避免跨Dialog实例的状态干扰。
• 用StatefulBuilder包裹动态内容，内部的setState仅刷新Dialog内的UI，实现下拉框选择后文本字段即时显示。
• 给ReusableDropdownButton添加value: selectedReason属性，保证下拉框视觉上能正确反馈当前选中状态。

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