博客

在实现Flutter页面过程中,可能会遇到输入框在底部显示问题,配置不好就会出现输入框被键盘遮挡问题,如下提供两种解决方案,根据自己场景可选择使用.

方案一:

如果没有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 属性就失效.