扑listView.Builder隐藏在最后一个列表项分隔

问题描述 投票:6回答:2

与ListView.Builder创建列表时,在最后一个项目怎么能一个隐藏分隔?

这是很容易添加分隔每个项目,但什么是解雇在列表的最后一项分频器的逻辑是什么?

没有与执行这一任务的具体例子中,没有具体的计算器问题。

   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,
  ],
);

}

解决方案的建议:

使用ListView.Builder的ListView.separator代替:

        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,
    ),
  ],
);

}

listview flutter divider
2个回答
2
投票

这可以很容易地与ListView.separated()完成


1
投票

您可以使用ListView.separated()用于动态创建的列表或ListTile.divideTiles短暂静态列表。这些方法都没有最后一个列表项后增加一个分频器。

ListTile.divideTiles

enter image description here

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

enter image description here

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

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

如果你想在最后一个项目之后的分隔看到我fuller answer

© www.soinside.com 2019 - 2024. All rights reserved.