Flutter Listview.Separated在列表的开头和结尾添加分隔符
Flutter Listview.Separated在列表的开头和结尾添加分隔符
提问于 2020-06-05 05:45:09
使用flutter，最简单、最整洁的方法是将分隔符放置在两行之间，并且作为第一行和最后一行？
我可以通过伪造itemCount并添加额外的行来做到这一点。
...
child: ListView.separated(
// Offset itemCount to start with separator
itemCount: sortedList.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return SizedBox(height: 0.0);
}
if (index == sortedList.length + 1) {
return SizedBox(height: 0.0);
}
return ListItem(...);
},
separatorBuilder: (context, index) {
return SizedBox(height: 10.0);
}))),回答 2
Stack Overflow用户
发布于 2021-07-02 05:03:17
恐怕这是我们用ListView.separated能得到的最干净的东西了
ListView.separated(
separatorBuilder: (context, index) => const Divider(height: 1.0,),
itemCount: 2 + boardList.length,
itemBuilder: (context, index) {
if (index == 0 || index == boardList.length + 1) return const SizedBox.shrink();
return MenuItem(
board: boardList[index - 1],
isSelected: boardList[index].id == selectedBoardId
);
},
);另一种方法是使用ListView.builder并将您的项目包装为带有底部边框的container
ListView.builder(
itemCount: boardList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: (widget.isSelected) ? Colors.grey[50] : color,
border: Border(
top: (index == 0) ? BorderSide(color: Theme.of(context).dividerColor) : BorderSide.none
bottom: BorderSide(color: Theme.of(context).dividerColor)
)
)
),
},
);Stack Overflow用户
发布于 2020-06-05 06:10:40
您可以将ListView.serarated包装在另一个ListView中，然后将分隔符放在ListView.separated的前面和后面。但您需要定义示例中所示的scrollDirection和shrinkWrap。否则，你将会得到一个无界高度的错误。作为分隔符，我使用了Divider-Widget，但是你可以使用你想要的任何东西。
ListView(
children: <Widget>[
Divider(),
ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: // ...
separatorBuilder: // ...
itemCount: // ...
),
Divider(),
],
),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62204671
复制相关文章
相似问题
腾讯云开发者
