加载图像后,它会通过覆盖边框半径来占据整个容器的大小。
这是我得到的Screenshot1
这是我一直在寻找的输出 ScreenShot2
代码:
StaggeredGridView.countBuilder(
padding: EdgeInsets.all(8.0),
crossAxisCount: 4,
itemCount: wallpapersList.length,
itemBuilder: (context, index) {
String imgPath = wallpapersList[index].data['url'];
return Container(
decoration: BoxDecoration(
color: kSecondaryColor,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
child: Image.network(imgPath, fit: BoxFit.fitHeight,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: SpinKitDoubleBounce(
color: Colors.white,
),
);
}));
答案 0 :(得分:0)
图像不遵循容器的边界半径。
所以您要做的就是使用ClipRRect()
像这样使用它
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(),
),
),
只需添加ClipRRect小部件,它就可以工作。