Flutter Listview.Separated 在列表的开头和结尾添加分隔符

Question

使用 flutter，不仅在行之间放置分隔符，而且还作为第一行和最后一行放置分隔符，最简单、最干净的方法是什么？

我可以通过伪造 itemCount 并添加额外的行来做到这一点。

...
child: ListView.separated(
  // Offset itemCount to start with separator
  itemCount: sortedList.length + 2,
  itemBuilder: (context, index) {
    if (index == 0) {
      return SizedBox(height: 0.0);
    }
    if (index == sortedList.length + 1) {
      return SizedBox(height: 0.0);
    }
    return ListItem(...);
  },
  separatorBuilder: (context, index) {
    return SizedBox(height: 10.0);
  }))),

Answer 1

恐怕这已经是我们使用 ListView.separated 所能得到的最干净的了

ListView.separated(
  separatorBuilder: (context, index) => const Divider(height: 1.0,),
  itemCount: 2 + boardList.length,
  itemBuilder: (context, index) {
    if (index == 0 || index == boardList.length + 1) return const SizedBox.shrink();
    return MenuItem(
      board: boardList[index - 1], 
      isSelected: boardList[index].id == selectedBoardId
    );
  },
);

另一种方法是使用ListView.builder并将您的项目包装在带有边框底部的容器

ListView.builder(
  itemCount: boardList.length,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: (widget.isSelected) ? Colors.grey[50] : color,
        border: Border(
          top: (index == 0) ? BorderSide(color: Theme.of(context).dividerColor) : BorderSide.none
          bottom: BorderSide(color: Theme.of(context).dividerColor)
          
        )
      )
    ),
  },
);