Flutter bottom overflowed by 64 pixels

方案一:

如果没有ScrollView或者ListView等可滚动空间包裹,则可以通过 padding设置实现键盘不被遮挡问题

Padding(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom
  ),
  child: TextField(
  )
)

MediaQuery.of(context).viewInsets.bottom 为键盘弹出时键盘高度,如果上面代码段被可滚动widget包裹,则会出现输入框并不一定在紧挨着键盘

方案二: 通过 Scaffold

Scaffold是自带自适应输入法弹出的,它有一个属性resizeToAvoidBottomInset,用来控制Scaffold组件是否需要自适应输入法弹出,重新计算view的高度,默认为 true 适应键盘模式

Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildContentView(context) //被ListView或者SingleChildScrollView等滑动控件包裹的TextField
);

_buildContentView 可以含有输入框的控件

注意:如果有自定义的APPBar控件,不配置appBar的话顶部会多一部分高度的空View

 AppBar(
        title: Text('Title'),
        centerTitle: true,
        elevation: 0,
        toolbarHeight: 0.001,
        bottom: null,

        brightness:Brightness.light ,

      )

可以设置 toolbarHeight 的高度,如果要设置状态栏的颜色则 toolbarHeight 高度不能为 0,否则 设置状态栏文字颜色的 brightness 属性就失效.
————————————————

Share