覆盖边界半径属性抖动的Image.network

时间:2020-05-28 04:43:38

标签: flutter flutter-layout flutter-dependencies flutter-animation

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

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


1 个答案:

答案 0 :(得分:0)

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

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

像这样使用它

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

只需添加ClipRRect小部件,它就可以工作。