Flutter中如何在ListView.builder生成的列表中间插入元素？

实现逻辑 #

你只需要调整ListView.builder的总长度和索引映射规则即可，不需要修改原有的业务数据列表：

• 总item数设置为原数据长度 + 自定义项数量，这里10条原数据+1个自定义项，所以itemCount为11
• 在itemBuilder中按索引判断渲染内容，同时对原数据的索引做偏移处理

示例代码 #

ListView.builder(
  itemCount: 11,
  itemBuilder: (context, index) {
    // 第3项（1开始计数）之后插入，对应索引为3的位置（0开始计数）
    if (index == 3) {
      // 替换为你的自定义展示组件即可
      return Container(
        padding: const EdgeInsets.all(16),
        color: Colors.lightBlue[50],
        child: const Text("我是插入的自定义项"),
      );
    }
    // 计算原数据对应的索引：索引大于3时减1，跳过自定义项占用的位置
    final originIndex = index > 3 ? index - 1 : index;
    // 替换为你原来的列表项渲染逻辑即可
    return ListTile(
      title: Text("普通列表项 ${originIndex + 1}"),
    );
  },
)

扩展说明 #

如果需要插入多个自定义项，或者插入位置是动态的，只需要调整判断条件和索引偏移量即可：比如要插入2个自定义项，总长度就加2，索引映射时减去已经渲染过的自定义项数量即可。

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