如何在ListView中实现类似Google Keep的固定项（置顶）功能

你之前的实现思路存在明显缺陷：

• 两个独立的ListView默认自带滚动属性，天然会出现分区独立滚动的问题
• 外层包裹SingleChildScrollView时报错的原因是：ListView默认会尝试占用父容器提供的最大可用高度，而SingleChildScrollView的可容纳高度是无限的，二者会发生viewport高度冲突。

单个ListView完全可以实现该功能，也是性能最优的实现方案，无需嵌套多滚动容器。

1. 短列表场景（总项数<50，无需复用） #

直接使用ListView普通构造，将固定项、分区标题、普通项按顺序拼接后传入children参数即可，整个列表统一滚动，无冲突：

ListView(
  children: [
    // 固定项分区
    const Padding(padding: EdgeInsets.all(8), child: Text("固定项", style: TextStyle(fontWeight: FontWeight.bold))),
    PinnedItem(data: pinnedData[0]),
    PinnedItem(data: pinnedData[1]),
    // 普通项分区
    const Padding(padding: EdgeInsets.all(8), child: Text("其他项", style: TextStyle(fontWeight: FontWeight.bold))),
    NormalItem(data: normalData[0]),
    NormalItem(data: normalData[1]),
    // 其余普通项...
  ],
)

2. 长列表场景（项数多，需要复用性能） #

使用ListView.builder构造，自行在itemBuilder中做下标分区判断即可，完全保留列表项复用能力：

final int pinnedCount = 3; // 你的固定项总数量
final int normalCount = 100; // 你的普通项总数量

@override
Widget build(BuildContext context) {
  return ListView.builder(
    // 总数量=固定项数+普通项数+2个分区标题
    itemCount: pinnedCount + normalCount + 2,
    itemBuilder: (context, index) {
      // 返回固定项分区标题
      if (index == 0) {
        return const Padding(padding: EdgeInsets.all(8), child: Text("固定项", style: TextStyle(fontWeight: FontWeight.bold)));
      }
      // 返回固定项
      if (index <= pinnedCount) {
        final itemIndex = index - 1;
        return PinnedItem(data: pinnedData[itemIndex]);
      }
      // 返回普通项分区标题
      if (index == pinnedCount + 1) {
        return const Padding(padding: EdgeInsets.all(8), child: Text("其他项", style: TextStyle(fontWeight: FontWeight.bold)));
      }
      // 返回普通项
      final itemIndex = index - pinnedCount - 2;
      return NormalItem(data: normalData[itemIndex]);
    },
  );
}

如果你坚持使用两个ListView嵌套的方案，可通过关闭ListView自身滚动能力、自适应高度的方式解决报错，但该方案会失去列表复用能力，项数超过30后会有明显性能下降：

SingleChildScrollView(
  child: Column(
    children: [
      ListView(
        physics: const NeverScrollableScrollPhysics(), // 关闭自身滚动
        shrinkWrap: true, // 高度自适应内容
        children: [/* 固定项 */],
      ),
      ListView(
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        children: [/* 普通项 */],
      )
    ],
  ),
)

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