Flutter TextField弹出键盘时顶部出现大量空白问题求助

嘿，我帮你分析下这个问题哈～你遇到的顶部大片空白，大概率是SafeArea和ListView的默认行为叠加搞出来的：SafeArea会自动避开系统状态栏，而ListView自带的kMaterialListPadding在顶部也有额外内边距，再加上键盘弹出时布局重绘，两者的内边距就叠加出了多余的空白区域。

给你几个实用的解决办法：

方法1：去掉ListView的顶部默认padding #

直接修改ListView的padding属性，保留左右和底部的内边距，去掉顶部的：

build(BuildContext context) { 
  return new Scaffold( 
    body: new SafeArea( 
      child: new ListView.builder( 
        itemBuilder: itemBuilder, 
        itemCount: 1, 
        // 复制默认padding并将顶部设为0
        padding: kMaterialListPadding.copyWith(top: 0), 
      ), 
    ) 
  ); 
}

方法2：换成SingleChildScrollView（更简洁） #

因为你只有一个TextFormField，用ListView有点大材小用，换成SingleChildScrollView既能实现滚动（防止键盘挡住输入框），又能自定义内边距，避免默认padding的问题：

build(BuildContext context) { 
  return new Scaffold( 
    body: new SafeArea( 
      child: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 自定义合适的内边距
        child: TextFormField( 
          decoration: new InputDecoration( 
            border: const OutlineInputBorder(), 
            hintText: "What's on your mind?", 
            helperText: "5-500 characters", 
          ), 
          maxLines: 3, 
        ),
      ), 
    ) 
  ); 
}

额外注意 #

别忘了确认Scaffold的resizeToAvoidBottomInset属性是true（默认就是true，但如果之前被修改过的话要改回来），这个属性能确保键盘弹出时页面自动调整大小，避免布局混乱。

内容的提问来源于stack exchange，提问作者Gautham