Flutter中Column内ListView滚动被TextField遮挡的解决方法

核心原因 #

你的布局大概率存在以下问题：

1. Column的父组件没有固定高度约束（比如嵌套了SingleChildScrollView），导致Expanded无法正确分配剩余空间给ListView，ListView滚动范围不受限，内容会向上延伸到TextField下方。
2. TextField背景透明，导致ListView滚动时内容透过TextField显示，产生被遮挡的视觉效果。

具体解决方案 #

方案1：移除Column外层的可滚动容器

如果你的Column外面套了SingleChildScrollView，必须删除它——SingleChildScrollView会让Column高度不受限，Expanded完全失效，ListView会变成无限延伸的列表，滚动时整个页面跟着动，内容自然会跑到TextField下方。

正确的基础布局结构：

Scaffold(
  body: Column(
    children: [
      TextField(
        decoration: InputDecoration(hintText: "输入内容"),
      ),
      Expanded(
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(title: Text("Item $index")),
        ),
      ),
    ],
  ),
)

方案2：给TextField设置不透明背景

如果是因为TextField背景透明，导致ListView内容透过显示，给TextField的父容器加个不透明背景色即可：

Container(
  color: Colors.white,
  child: TextField(
    decoration: InputDecoration(hintText: "输入内容"),
  ),
),

方案3：用CustomScrollView实现固定头部+滚动列表

如果需要TextField固定在顶部，ListView滚动时内容从下方穿过，推荐用CustomScrollView配合SliverToBoxAdapter实现：

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: TextField(
        decoration: InputDecoration(hintText: "输入内容"),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("Item $index")),
        childCount: 50,
      ),
    ),
  ],
)

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