Image.network 覆盖边界半径 属性 flutter

Question

加载图像后，它通过覆盖边界半径来占据整个容器的大小。

这是我得到的输出 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,
                          ),
                        );
                      }));

Answer 1

图像不遵循容器的边界半径。

所以你要做的就是使用 ClipRRect()

这样使用

Container(
child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image.network(),
  ),
),

只需添加 ClipRRect 小部件即可。