我想像下面的图片一样重新创建列表UI:
如您所见,“列表”磁贴中的“前导图标”在其右侧有一个垂直分隔线,并且与底部分隔线相交,但是我无法获得那种外观,并且只能重新创建该外观用户界面。
这是我正在使用的代码:
contentBuilder: (BuildContext context) {
return Container(
child: FutureBuilder(
future: _getFoodDetails(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(child: Center(child: Text("Loading...")));
} else {
return Expanded(
child: ListView.separated(
itemCount: snapshot.data.length,
separatorBuilder: (context, index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: false,
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.phone, color: Colors.blue),
VerticalDivider(),
],
),
title: Text(snapshot.data[index].foodTitle),
subtitle: Text(snapshot.data[index].foodQuantity),
onTap: () {},
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.yellow, size: 30.0),
);
},
),
);
}
},
),
);
}
请建议我如何在分隔线彼此相交的情况下实现所需的UI外观,并删除即时获取的填充。