颤动 listView.Builder 隐藏最后一个列表项的分隔符

Posted

技术标签:

【中文标题】颤动 listView.Builder 隐藏最后一个列表项的分隔符【英文标题】:flutter listView.Builder hide the divider on last list item 【发布时间】:2019-03-11 15:34:30 【问题描述】:

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

【问题讨论】:

使用 ListView.separated 【参考方案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 用于添加分隔符。

如果您确实想要在最后一项之后添加分隔符,请参阅我的fuller answer。

【讨论】:

ListView.separated 是我想要的,谢谢。【参考方案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,
    );

  ,
)

【讨论】:

以上是关于颤动 listView.Builder 隐藏最后一个列表项的分隔符的主要内容,如果未能解决你的问题,请参考以下文章

如果数据发生变化,颤动如何更新 Listview.builder

如何在颤动中使我的文本与 listview.builder 一起滚动

如何在颤动中为 listview.builder 制作列表视图?

无法在颤动中过滤 listview.builder 的列表

在颤动的页面上同时使用水平和垂直 listview.builder

在颤动的 ListView.builder 中,我得到了 Null 值