Flutter ListView.Builder：如何在最后一个列表项上隐藏分隔符。

Question

如何在使用ListView.Builder创建列表时隐藏最后一项的分隔符？

很容易为每个项目添加分隔符，但如何逻辑上在列表的最后一个项目中取消分隔符呢？

目前还没有具有实际示例的确切stackoverflow问题来实现此任务。

   Widget build(BuildContext context) {
return 
    ListView.builder(
      shrinkWrap: true,
      physics: ScrollPhysics(),
      itemCount: OffersList.length,
      itemBuilder: (context, index) {
        Offer item = OffersList[index];
        return ListItem(context, item);
      },
    );
  }



Widget ListItem(BuildContext context, Offer item) {
if ( index == OffersList.length - 1) {
  dividerChecker = EmptyContainer();
} else {
  dividerChecker = Divider();
}
return Column(
  children: <Widget>[
    OfferListItem(
      offerData: item,
      status: status,
      userType: userType,
    ),
    dividerChecker,
  ],
);

Solution as suggested:

使用ListView.separator而不是ListView.Builder：

        ListView.separated(
      separatorBuilder: (BuildContext context, int index) => new Divider(),
      shrinkWrap: true,
      physics: ScrollPhysics(),
      itemCount: OffersList.length,
      itemBuilder: (context, index) {
        Offer item = OffersList[index];
        return offerListItem(context, item);
      },
    ),
Widget offerListItem(BuildContext context, Offer item) {
return Column(
  children: <Widget>[
    OfferListItem(
      offerData: item,
      status: status,
      userType: userType,
    ),
  ],
);

- petras J

---

使用 ListView.separated。 - Rémi Rousselet

Answer 1

你可以使用ListView.separated()来创建动态列表，或者使用ListTile.divideTiles来创建静态短列表。这两种方法都不会在最后一个列表项之后添加分隔符。

ListTile.divideTiles

ListView(
  children: ListTile.divideTiles( //          <-- ListTile.divideTiles
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

ListView.separated

ListView.separated(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('$index sheep'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

这将为每个项目返回两个小部件，除了最后一个项目。 separatorBuilder 用于添加分隔符。

如果您想在最后一个项目后添加分隔符，请参阅我的更完整的答案。

- Suragch

---

ListView.separated 就是我在寻找的，谢谢。 - Niraj

Answer 2

使用 ListView.separated() 十分容易实现。

ListView.separated(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('$index sheep'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(thickness: 0.5,
    indent: 20,
    endIndent: 20,
    );

  },
)

- hysabone.com