Flutter AlertDialog被键盘遮挡，如何添加底部边距上移对话框？

我之前也踩过这个坑，默认的AlertDialog在键盘弹出时确实容易被遮挡——毕竟它默认是屏幕居中布局，不会自动响应键盘的高度变化。下面我一步步给你讲清楚怎么解决，以及背后的原理：

一、快速实现：给AlertDialog添加动态底部边距 #

最直接的方式是利用MediaQuery获取键盘高度，动态调整对话框的底部边距，这样不管键盘弹起还是收起，对话框都能自动适配位置：

void showMyDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      // 获取键盘弹出时的底部遮挡高度
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      return Padding(
        // 键盘弹出时用键盘高度作为底部边距，否则留默认间距
        padding: EdgeInsets.only(bottom: keyboardHeight > 0 ? keyboardHeight : 24.0),
        child: AlertDialog(
          title: const Text("操作提示"),
          content: const TextField(
            decoration: InputDecoration(hintText: "请输入需要的内容"),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text("取消"),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text("确认"),
            ),
          ],
        ),
      );
    },
  );
}

二、原理拆解：为什么这个方案能解决问题？ #

你提到的临时解决方案应该也是基于这个逻辑，这里给你把原理讲透：

• MediaQuery.of(context).viewInsets.bottom：这个属性会返回屏幕被系统UI（比如键盘、底部导航栏）遮挡的底部高度。当键盘弹出时，它会实时返回键盘的实际高度；键盘收起时，返回0。
• 默认的AlertDialog没有处理这个值，所以它始终保持屏幕居中，当键盘弹出挤压可用空间时，对话框的下半部分就会被键盘盖住。
• 我们把这个键盘高度设为对话框的底部padding，相当于让对话框主动“避开”键盘占据的区域，自然就不会被遮挡了。

三、进阶方案：用Dialog自定义更灵活的布局 #

如果AlertDialog的默认样式满足不了你的需求，你可以直接用Dialog组件完全自定义布局，精准控制边距和位置：

void showCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      return Dialog(
        // 直接控制对话框和屏幕边缘的距离，加上键盘高度实现上移
        insetPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0 + keyboardHeight),
        child: SizedBox(
          height: 280,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("自定义对话框"),
              const SizedBox(height: 20),
              const TextField(decoration: InputDecoration(hintText: "请输入内容")),
              const SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(onPressed: () => Navigator.pop(context), child: const Text("取消")),
                  TextButton(onPressed: () => Navigator.pop(context), child: const Text("确认")),
                ],
              )
            ],
          ),
        ),
      );
    },
  );
}

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