Image.network 覆盖边界半径属性颤动答案

【问题标题】：Image.network overriding the border radius property flutterImage.network 覆盖边界半径属性颤动
【发布时间】：2020-09-15 07:48:58
【问题描述】：

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

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

【问题讨论】：

进度指示器在哪里？
@jitsm555 我刚刚再次更新了问题。请你再看一遍。现在问题只是图像。它覆盖了边框半径属性。

标签： flutter flutter-layout flutter-dependencies flutter-animation

【解决方案1】：

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

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

这样使用

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

只需添加 ClipRRect 小部件即可。

【讨论】：