Flutter ListView未显示全部条目，插入自定义Widget覆盖原数据如何解决

问题根因 #

你当前的写法直接复用了原数据的索引位置返回自定义组件，等于把对应位置的原数据直接替换了，同时没有正确计算包含插入组件后的总列表长度，才会出现原数据丢失的问题。

解决逻辑 #

1. 先计算列表总长度：每2条原数据插入1条自定义组件，总长度 = 原数据长度 + (原数据长度 ~/ 2)。以你举的5条原数据为例，总长度=5 + 2=7，符合预期。
2. 做索引映射：区分当前index是原数据位还是自定义组件位，自定义组件位不用取原数据，原数据位需要换算出对应的原数据索引：原数据索引 = 当前index - 插入过的自定义组件数量，插入过的自定义组件数量等于 index ~/ 3。
3. 补全加载、错误状态判断，避免空值异常。

修改后代码 #

StreamBuilder(
  stream: stream,
  builder: (BuildContext context, AsyncSnapshot<List<DocumentSnapshot>> snapshots) {
    // 处理加载状态
    if (snapshots.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 处理错误状态
    if (snapshots.hasError) {
      return const Center(child: Text("数据加载失败"));
    }
    // 处理空数据状态
    if (!snapshots.hasData || snapshots.data!.isEmpty) {
      return const Center(child: Text("暂无内容"));
    }
    final sourceDataList = snapshots.data!;
    // 计算包含自定义组件的总条目数
    final totalItemCount = sourceDataList.length + (sourceDataList.length ~/ 2);
    
    return Flexible(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        // 指定总列表长度
        itemCount: totalItemCount,
        itemBuilder: (context, index) {
          // 每3个位置的最后一位返回自定义组件
          if (index % 3 == 2) {
            return Container(child: Text("Custom Widget"));
          }
          // 换算对应原数据的索引
          final sourceIndex = index - (index ~/ 3);
          return Container(child: Text(sourceDataList[sourceIndex].data()?['title'] ?? ""));
        }
      )
    );
  }
)

内容的提问来源于stack exchange，提问作者Black Eyed Beans