阅读 3188

flutter 键盘弹起时遮挡输入框

问题

flutter项目中,使用TextField文本框时常常会遇到下面这种情况,输入框位置靠近页面底部,点击输入框弹起键盘时,键盘会遮挡住文本框,影响用户体验

键盘弹起前
键盘弹起后

解决办法

  • 在TextFiled外面加Padding
  • MediaQuery.of(context).viewInsets.bottom是键盘弹起时、获取到的键盘高度
Padding(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom
  ),
  child: TextField(
    controller: _controller,
  )
)
复制代码
  • 在main widget外加SingleChildScrollView 及其属性reverse: true
  • body 和 SingleChildScrollView 之间的代码作用是:键盘弹出时,点击页面空白部分、键盘会收起
body: GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {
      FocusScope.of(context).requestFocus(FocusNode());
    },
    child: SingleChildScrollView(
      reverse: true,
      child: ......
    )
)
复制代码
  • 在Scaffold 里添加属性 resizeToAvoidBottomInset: false
return Scaffold(
    resizeToAvoidBottomInset: false,
    .....
)
复制代码
文章分类
前端
文章标签