【Flutter 问题系列第 16 篇】如何防止软键盘弹出后顶掉内容_flutter 中不使布局被输入框顶上去

这是【Flutter 问题系列第 16 篇】，如果觉得有用的话，欢迎关注专栏。

问题描述

前几天遇到一个问题，在层级组件 Stack 中，当键盘 TextField 的输入框获取到焦点的时候，会出现因为软键盘的弹出，把内容给顶上去的情况，模拟情况如下动态图。

这种情况当然不是我们需要的，怎么解决呢？其实也很简单，一行代码就行了。

解决方案

在 Scaffold 中有一个属性是 resizeToAvoidBottomInset ，类型为 bool ，默认为 true。

源码的解释是如果该属性为 true，则 body 和脚手架的浮动窗口组件会自行调整大小，从而防止键盘遮盖内部的组件。

所以只需要将该属性设置为 false，让键盘可以遮盖内部的组件即可。如下代码所示

@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
    );
  }
1
2
3
4
5
6

修改后的效果

修改后的动态示意图如下所示

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

---

结束语

Google 的 Flutter 越来越火，截止 2021年4月24日 GitHub 标星已达 90K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。