flutter - 在 Flutter 中，如何使我的 FadeInImage 适合具有圆边的父容器？

Question

这是我的代码。这会生成一个矩形图像。

    return Container(
      width: 325,
      height: 245,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
      child: FadeInImage.assetNetwork(
        placeholder: AppAssets.eventPlaceholder,
        image: tempPhoto,
        fit: BoxFit.cover,
      ),
    );

我希望照片的边角被切掉，因为父级有圆角。

Answer 1

您可以用 ClipRRect 包装小部件获得圆角:

A widget that clips its child using a rounded rectangle.

在你的情况下:

 return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: 325,
        height: 250,
        color: AppColors.white,
        child: FadeInImage.assetNetwork(
          placeholder: AppAssets.eventPlaceholder,
          image: tempPhoto,
          fit: BoxFit.cover,
        ),
      ),
    );

• Here是 Google 团队解释 ClipRRect 的 YouTube 视频.