Flutter:ListView 里面的 ListView.builder
Posted
技术标签:
【中文标题】Flutter:ListView 里面的 ListView.builder【英文标题】：Flutter:ListView inside ListView.builder 【发布时间】：2020-11-12 08:06:38 【问题描述】：我正在尝试带来一个容器列表，并且我想使用火存储更改此容器列表中的详细信息。但是当我运行程序时，页面显示为空白。 The output i want is like this image, The output i am getting. 我的第二个问题是如何将图像添加到 firestore 内的字段中。 在此先感谢，在堆栈溢出中发布问题真的很难。
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot)
if (!snapshot.hasData)
const Text('No Event');
else if(snapshot.hasError) const Text('No data avaible right now');
else
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index)
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//1st box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'$myEvent['date_1']',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'$myEvent['title_1']',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'$myEvent['details_1_a']',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'$myEvent['details_1_b']',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
)),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'$myEvent['image_1']',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
//2nd box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'$myEvent['date_2']',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'$myEvent['title_2']',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'$myEvent['details_2_a']',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'$myEvent['details_2_b']',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
),
),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'$myEvent['image_2']',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
【问题讨论】：
嗨，欢迎来到 SO！我建议将您问题中的代码减少为minimal example。它将帮助其他人更轻松地阅读它。 感谢您的建议。我这样做是为了让其他人可以理解我的意思。 【参考方案1】：我认为你不需要第二个列表视图，但如果你需要，试试这个：
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot)
if (!snapshot.hasData)
const Text('No Event');
else if(snapshot.hasError) const Text('No data avaible right now');
else
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index)
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
//1st box
...
【讨论】：
我本来想带 5 个盒子，现在有 25 个盒子，大部分都显示为空 在那25个盒子里如何去掉那些为空的盒子以上是关于Flutter:ListView 里面的 ListView.builder的主要内容，如果未能解决你的问题，请参考以下文章
Flutter ListView 与 List 中的小部件不会在应该更新时更新
Flutter：ListView里面的CheckboxListTile跳转到顶部