Question

问题是图像边缘可见并且不遵循我为Container设置的边框。

Container(
              decoration: BoxDecoration(
                color: Colors.grey[900],
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: Image(
                image: NetworkImage(thisSongInfo.albumImageUrl),
                fit: BoxFit.cover,
                color: Colors.black87,
                colorBlendMode: BlendMode.darken,
              ),
),

适合度：BoxFit.contain解决了边缘问题，但这不能覆盖容器

Answer 1

尝试使用ClipRRect包装图像，有关此处的文档的更多信息 https://api.flutter.dev/flutter/widgets/ClipRRect-class.html，

尝试以下代码：

Container(
                      decoration: BoxDecoration(
                        color: Colors.grey[900]
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(24.0)),
                          child: Image(
                            image: NetworkImage(thisSongInfo.albumImageUrl),
                            fit: BoxFit.cover,
                            color: Colors.black87,
                            colorBlendMode: BlendMode.darken,
                          )),
                    )

Answer 2

如果您想要圆角图像，可以使用"ClipRRect"小部件

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child:  Image(
                image: NetworkImage(thisSongInfo.albumImageUrl),
                fit: BoxFit.cover,
                color: Colors.black87,
                colorBlendMode: BlendMode.darken,
              ),
         )

容器中的子图像不遵循容器边界

2 个答案: