我正在尝试构建一个垂直列表,其中每个项目都是图像水平列表。
图像大小在图像小部件中设置,但如果我没有设置具有高度值的外部容器,则会出现黑屏。
我的问题是,如何设置Widget高度来包装子窗口小部件,这样我就不需要设置外部容器高度了?
这是我的代码:
return ListView.builder( //External vertical list
padding: EdgeInsets.all(2),
itemCount: snapshot.data.length,
physics: ScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, outerIndex) {
print(
"Outer ListView.builder: building item $outerIndex of ${snapshot.data.length} items");
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.all(5.0),
height: 300, //When I remove Container and height value, I get black screen
child: ListView.builder( //Internal horizontal list
itemCount: snapshot.data[outerIndex].items.length,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, mediaIndex) {
print("Inner ListView.builder: mediaItem $mediaIndex");
return Container(
padding: EdgeInsets.symmetric(horizontal: 5),
child: FadeInImage.memoryNetwork(
height: 300,
width: 160,
placeholder: kTransparentImage,
image: TmdbService.buildImageUrl(snapshot.data[outerIndex].items[mediaIndex].poster_path),
fit: BoxFit.fill,
),
);
}),
),
],
);
},
);
}
},
);
删除height: 300,
确实没有画任何东西,但它也抛出了一个例外:
I/flutter (12081): The following assertion was thrown during performLayout():
I/flutter (12081): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1598 pos 16:
I/flutter (12081): 'constraints.hasBoundedHeight': is not true.
所以你可以像我在评论中写的那样玩BoxConstraints和其他盒子,但据我所知,你真正想要的不是两次设置大小。那么为什么不从width
中删除hegiht
和FadeInImage
并将它们设置为Container?由于您已经设置了fit: BoxFit.fill
,因此图像将填充所有可用容器的空间。所以以下内容对我有用:
return Scaffold(
body: ListView.builder(
//External vertical list
padding: EdgeInsets.all(2),
physics: ScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, outerIndex) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.all(5.0),
height:300,
child: ListView.builder(
//Internal horizontal list
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, mediaIndex) {
print("Inner ListView.builder: mediaItem $mediaIndex");
return Container(
padding: EdgeInsets.symmetric(horizontal: 5),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image:
"https://i.pinimg.com/originals/8a/ad/dc/8aaddc2ab4cfd6a0b17f82e04ed4800d.png",
fit: BoxFit.fill,
),
);
}),
),
],
);
},
), // This trailing comma makes auto-formatting nicer for build methods.
);