Flutter-如何使用ListView.separated（）上的divider（）添加第一顶部和最后底部列表

Question

我在列表上添加了分隔线，但我也想在列表的顶部和末尾使用分隔线。因为分隔线仅在每个列表的中间。

ListView.separated(
 itemCount: user.personList.length,
 separatorBuilder: (context, index) => Divider(),
 itemBuilder: (context, index){
   return ListTile(
    title: Text(user.personList[index].id)
  )
 }
)

Answer 1

您可以通过以下方式在顶部和底部添加分隔线。

您必须将长度增加2并在0和length-1的返回容器上增加长度，这将使divider更清晰。如果您想要专用的分隔线，则还可以使用分隔线小部件。

ListView.separated(
      itemCount: user.personList.length + 2,
      separatorBuilder: (context, index) => Divider(),
      itemBuilder: (context, index) {
        if (index == 0 || index == user.personList.length + 1) {
          return Divider(
            color: Colors.black,
            thickness: 2,
          );
        }
        return ListTile(title: Text((index - 1).toString())); // note: you have to access element by -1;
      },
    ),