Flutter ListTile列表滚动异常：列表项未被搜索栏遮挡问题咨询

问题根源 #

你的布局里，Column的子组件是按添加顺序绘制的——后加的组件层级更高。TextFormField是Column第一个子项，而ListView在Expanded里是第三个，所以ListView的层级比搜索栏高。滚动时ListTile会跑到搜索栏上方，而搜索栏的不透明背景会挡住ListTile里的文本，就出现了你看到的“文本被遮挡、ListTile却在上面”的情况。

三个解决办法 #

1. 用CustomScrollView重构布局（最推荐）

这种方式把搜索栏做成固定头部，列表在下方滚动，从根本上避免层级冲突：

Scaffold(
  body: CustomScrollView(
    slivers: [
      // 搜索栏作为固定头部
      SliverToBoxAdapter(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: TextFormField(
            decoration: const InputDecoration(hintText: '搜索'),
          ),
        ),
      ),
      const SliverToBoxAdapter(child: SizedBox(height: 16)),
      // 列表内容
      SliverSeparatedList(
        separatorBuilder: (context, index) => const Divider(),
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
      ),
    ],
  ),
)

2. 给ListView设置裁剪行为

如果不想改整体布局，直接给ListView.separated加clipBehavior，让它裁剪超出自身边界的内容，这样滚动时ListTile往上跑的部分会被切掉，不会覆盖搜索栏：

Expanded(
  child: ListView.separated(
    clipBehavior: Clip.hardEdge, // 明确设置裁剪，默认也是这个，若被修改过需手动指定
    separatorBuilder: (context, index) => const Divider(),
    itemCount: 50,
    itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
  ),
)

3. 用Stack调整层级

把TextFormField放在Stack的上层，确保它始终压在列表上面：

Scaffold(
  body: Padding(
    padding: const EdgeInsets.all(16),
    child: Stack(
      children: [
        // 列表和下方容器放在底层，给搜索栏留位置
        Column(
          children: [
            const SizedBox(height: 60),
            Expanded(
              child: ListView.separated(
                separatorBuilder: (context, index) => const Divider(),
                itemCount: 50,
                itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
              ),
            ),
            Container(height: 50, color: Colors.grey),
          ],
        ),
        // 搜索栏放在上层
        TextFormField(
          decoration: const InputDecoration(hintText: '搜索'),
        ),
      ],
    ),
  ),
)

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