Flutter输入框、界面被键盘遮挡问题解决

最新推荐文章于 2025-05-27 16:00:12 发布

原创最新推荐文章于 2025-05-27 16:00:12 发布 · 5.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

一起来学Flutter 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在Flutter项目中遇到软键盘弹出遮挡输入框的常见问题及其解决方案。方法一是利用Scaffold的resizeToAvoidBottomInset属性调整布局；方法二是借助showModalBottomSheet配合MediaQuery避免遮挡。文章还提供了相关资源链接以供更全面的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人在项目中遇到软键盘弹出遮挡问题的解决，主要使用了一下两种

方法一：

如果我们的页面在被自带的Scaffold中包裹的情况下，该组件是带有自适应输入法弹出的，它有一个属性resizeToAvoidBottomInsetn，参数是bool类型，通过true/false来控制是否重新计算高度，默认打开。这段代码就不贴了，入门的都知道。

方法二：

在弹窗样式的输入框里使用Scaffold会有一些问题，所以使用如下这中方式是比较合适的能实现一个比较完美的效果。

 showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              enableDrag: false,
              isDismissible: false,
              backgroundColor: Colors.white,
              builder: (context) => WillPopScope(
                    onWillPop: () async => false, //防止点击返回按键
                    child: AnimatedPadding(
                      padding: MediaQuery.of(context).viewInsets,
                      // 我们可以根据这个获取需要的padding，解决showModalBottomSheet被软键盘遮盖问题
                      duration: const Duration(milliseconds: 100),
                      child: showTableBottomContentEdit(items, element.value),
                    ),
                  ));

上述两种仅仅是我在项目中用到的，如果无法达到所需的效果可以看看下面这篇文章有比较多样的案例，可以参考：

https://www.jianshu.com/p/5bf431c5d03d/