Flutter中实现Alert Dialog叠加显示的技术问题咨询

问题分析 #

你的代码无法实现需求的原因有以下几点：

1. 状态判断错误：调用checkPhone2后立刻检查PostCheckPhoneLoadingState，但这个状态是请求开始时的加载状态，不是请求完成后的成功状态，应该监听请求完成的成功状态（比如PostCheckPhoneSuccessState）。
2. 赋值而非比较：checkModel!.status = true是赋值操作，不是相等判断，应改为checkModel!.status == true。
3. 过早关闭弹窗：状态判断后立刻调用Navigator.pop(context)关闭第一个弹窗，导致第二个弹窗还没显示就被取消。
4. 同步状态检查：checkPhone2是异步操作，调用后状态不会立刻更新，条件判断永远不会触发。

解决方案 #

使用BlocListener监听Cubit的状态变化，在请求完成并返回成功状态时显示第二个弹窗。调整Save按钮的逻辑，只触发检查操作，由监听器处理后续流程。

修正后的代码：

GestureDetector(
  onTap: () {
    showDialog(
      context: context,
      builder: (context) {
        return BlocListener<AppCubit, AppState>(
          listener: (context, state) {
            // 监听手机号检查完成的成功状态
            if (state is PostCheckPhoneSuccessState) {
              final cubit = AppCubit.get(context);
              if (cubit.checkModel!.status == true) {
                // 显示第二个弹窗
                showDialog(
                  barrierDismissible: true,
                  useRootNavigator: true,
                  useSafeArea: true,
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      content: const Text("该手机号已注册"),
                      actions: [
                        TextButton(
                          onPressed: () {
                            // 先关闭第二个弹窗，再关闭第一个
                            Navigator.pop(context);
                            Navigator.pop(context);
                          },
                          child: const Text("确定", style: TextStyle(color: Colors.orange)),
                        ),
                      ],
                    );
                  },
                );
              } else {
                // 手机号未注册，直接关闭第一个弹窗
                Navigator.pop(context);
              }
            } else if (state is PostCheckPhoneErrorState) {
              // 处理请求失败的情况，比如关闭弹窗或显示错误信息
              Navigator.pop(context);
            }
          },
          child: AlertDialog(
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text(
                  "取消",
                  style: TextStyle(color: Colors.orange),
                ),
              ),
              TextButton(
                onPressed: () {
                  // 触发手机号检查，不在这里处理状态
                  AppCubit.get(context).checkPhone2(
                    countryCode: "+962",
                    phone: phonecontroller.text,
                  );
                },
                child: const Text(
                  "保存",
                  style: TextStyle(color: Colors.orange),
                ),
              ),
            ],
            title: const Text("编辑你的手机号"),
            shape: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            scrollable: true,
            content: SizedBox(
              height: 40,
              child: TextField(
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide(
                      color: HexColor("#dedede"),
                    ),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide(
                      color: HexColor("#dedede"),
                    ),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                controller: phonecontroller,
              ),
            ),
          ),
        );
      },
    );
  },
)

关键修改说明 #

• BlocListener监听状态：用BlocListener包裹第一个弹窗，监听Cubit发出的成功状态，在合适时机显示第二个弹窗。
• 修正比较操作：把赋值操作改为相等判断，确保逻辑正确。
• 移除过早关闭弹窗：第一个弹窗的关闭逻辑移到监听器中，确保第二个弹窗能正常显示。
• 监听正确状态：改为监听请求完成的成功状态，确保只在检查完成后执行后续操作。

额外提示：

• 确保你的Cubit在手机号检查完成后会发出PostCheckPhoneSuccessState状态，如果状态类名称不同，请自行调整。
• 添加错误状态处理逻辑，比如请求失败时关闭弹窗或显示错误提示。
• 第二个弹窗的确定按钮会依次关闭两个弹窗，若需保留第一个弹窗，可调整关闭逻辑。

内容的提问来源于stack exchange，提问作者Abdallah Y. Abu Asab