Flutter ListView.builder 实现非重复头部随列表滚动的问询

当前布局的固定问题根源：头部文本、分割线被放在独立的Column固定区块中，和下方的可滚动列表属于完全分离的两个布局层级，不在同一个滚动视口范围内，因此会被钉在页面顶部无法跟随内容滚动。

之前的两类尝试失效的原因：

• 外层套ListView包裹Column结构时，内部嵌套了独立滚动的ListView，会引发纵向滚动方向的容器冲突，导致列表无法正常滚动。
• 尝试将头部纳入列表item体系时，通常是未做索引偏移适配，才会觉得不适配现有场景，实际上只需要调整item计数规则即可实现，无需复杂改动。

直接复用现有ListView.builder组件，移除外层Column嵌套和Expanded包裹，将头部与分割线纳入整个可滚动的item序列即可：

1. 将列表的itemCount调整为items.length + 1，多出的1个计数位专门用于承载头部文本和分割线。
2. 在itemBuilder方法中增加索引判断逻辑：
   • 索引为0时，返回原来的带计数的“Items”富文本和对应的分割线，这部分元素会随列表整体滚动自然滑出可视区域。
   • 索引大于0时，将索引值减1映射回原items数组，返回原来的CheckboxListTile条目。
3. 移除垂直滚动场景下不必要的shrinkWrap: true参数，避免不必要的性能损耗。

调整后的代码示例 #

return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: appBarColor,
        title: Text("Groceries"),
      ),
      // 直接将可滚动列表作为body，移除原Column固定结构
      body: ListView.builder(
        scrollDirection: Axis.vertical,
        // 计数加1，预留头部位置
        itemCount: items.length + 1,
        itemBuilder: (context, index) {
          // 第一个item返回头部+分割线
          if (index == 0) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                  child: Text.rich(
                    TextSpan(
                      text: "Items",
                      style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                      children: [
                        TextSpan(
                          text: " (" + items.length.toString() + ")",
                          style: TextStyle(
                            fontSize: 16.0,
                            fontWeight: FontWeight.normal,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Divider(
                  height: 20.0,
                  thickness: 1.0,
                ),
              ],
            );
          }
          // 其余item映射回原列表数组
          final realIndex = index - 1;
          return CheckboxListTile(
            value: true,
            title: Text(items[realIndex]),
          );
        },
      ),
    );

如果后续需要给列表条目添加统一分割线，可将ListView.builder替换为ListView.separated，保持相同的索引偏移逻辑即可，不需要额外调整整体结构。

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