Flutter弹窗遇键盘弹出时尺寸异常问题求助

核心解决方案 #

要固定弹窗尺寸并保证TextField正常聚焦，需从弹窗布局约束和键盘交互两方面调整：

• 给Dialog设置明确的宽高约束，避免其随键盘弹出时的视图Insets自动调整
• 用SingleChildScrollView包裹表单内容，确保键盘弹出时内容可滚动查看
• 在showDialog中设置useSafeArea: false，阻止弹窗因键盘挤压改变布局

修改后的代码示例 #

以下是调整后的核心代码片段：

var res = await showDialog<Customer?>(
    barrierDismissible: false,
    useSafeArea: false, // 禁用安全区域自动调整，避免弹窗上移变形
    context: __globalService.navigatorKey.currentContext!,
    builder: (_) => PopScope(
          canPop: false,
          child: Dialog(
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Builder(builder: (context) {
                final screenHeight = MediaQuery.of(context).size.height;
                return Padding(
                  padding: const EdgeInsets.all(25),
                  child: SizedBox(
                    width: 600,
                    height: screenHeight * 0.8, // 固定弹窗高度为屏幕的80%
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max, // 让Column占满固定高度
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0, 0, 20),
                          child: Text(
                            AppLocalizations.of(context)!
                                .translate('addNewCustomer'),
                            style: const TextStyle(
                                fontSize: 20,
                                color: Colors.black,
                                fontWeight: FontWeight.w500),
                          ),
                        ),
                        // 用Expanded包裹滚动视图，占满弹窗剩余空间
                        Expanded(
                          child: SingleChildScrollView(
                            child: Container(
                              decoration: const BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5)),
                                color: Colors.white,
                              ),
                              child: Padding(
                                  padding: const EdgeInsets.all(20),
                                  child: Form(
                                      key: formKey,
                                      child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          mainAxisSize: MainAxisSize.min,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.stretch,
                                          children: [
                                            // 原有表单内容保持不变
                                          ]))),
                            ),
                          ),
                        ),
                        // 底部按钮区域保持不变
                        Padding(
                          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
                          child: Row(children: [
                            // 原有按钮逻辑保持不变
                          ]),
                        ),
                      ],
                    ),
                  ),
                );
              })),
        ));

关键修改说明 #

1. useSafeArea: false：阻止Flutter自动将弹窗上移避开键盘，强制弹窗保持原有位置和尺寸
2. 固定宽高：通过SizedBox设置固定宽度（600）和相对屏幕高度（80%），彻底锁定弹窗尺寸
3. Expanded + SingleChildScrollView：让表单区域占满弹窗剩余高度，同时支持内容滚动，保证键盘弹出时所有字段都能被访问
4. mainAxisSize: MainAxisSize.max：让Column占满SizedBox的固定高度，配合Expanded实现内容与按钮区域的合理分配

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