我们如何在SliverList中实现分隔符/分割线。ListView.separated是在列表中创建分隔符的方便方法,但我没有看到任何关于SliverList的文档或示例。
我们如何在SliverList中实现分隔符/分割线。ListView.separated是在列表中创建分隔符的方便方法,但我没有看到任何关于SliverList的文档或示例。
与 ListView.separated 类似
import 'dart:math' as math;
List<String> values = List();
for (int i = 1; i <= 50; i++) {
values.add(i.toString());
}
return CustomScrollView(
semanticChildCount: values.length,
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
final int itemIndex = index ~/ 2;
if (index.isEven) {
return Padding(
child: Text(values[itemIndex]),
padding: EdgeInsets.all(16));
}
return Divider(height: 0, color: Colors.grey);
},
semanticIndexCallback: (Widget widget, int localIndex) {
if (localIndex.isEven) {
return localIndex ~/ 2;
}
return null;
},
childCount: math.max(0, values.length * 2 - 1),
),
),
],
);
简单的方法,
使用 SliverFillRemaining
return CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: ListView.separated(
itemCount:value.length,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index){
return Divider();
},
itemBuilder: (BuildContext context, int index) {
//widget return
})
),
使用SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
SizedBox(height: 5),
//your main widget is here
SizedBox(height: 5),
Divider(height: 1)
],
);
},
childCount: model.length,
),
)
shrinkWrap: true
会尝试渲染列表中的所有项,即使不在视口中吗?这难道不会抵消 SliverFillremaining
的效果吗? - Nithin Sai虽然这个问题很旧,但我会为未来的读者添加我的答案。
你可以简单地用 Container
包装你的小部件,然后给容器一个底部边框。以下是一个示例:
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey.shade300, width: 0.5))),
child: YourWidget(),
),
CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(_, int index) {
return Column(
children: <Widget>[
// Put your widget here
YourWidget(),
// This divider will not appears on last index
if(index != (item.length - 1))
const Divider(),
],
);
},
childCount: item.length,
),
),
],
),
SliverList.separated
。