颤动 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 制作列表视图?