Flutter：如何去除带圆角容器与子图片间的空白

我是Flutter初学者，试了各种办法都没解决。想去掉带圆角的Container和它的子Image之间的空白，两者都设了border radius。下面是我的代码和示例图，求帮忙。

代码片段 #

Container(
  height: 100,
  width: double.infinity * screenWidthRatio,
  margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: blueColor, width: 3),
    gradient: const LinearGradient(
      begin: Alignment.centerRight,
      end: Alignment.centerLeft,
      colors: [
        Colors.black,
        Colors.black87,
        Colors.black54,
        Colors.transparent,
      ],
    ),
  ),
  child: Row(
    children: [
      ClipRRect(
        borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(20),
            bottomLeft: Radius.circular(20)),
        child: Image.network(
          'https://img.lemde.fr/2022/02/06/0/0/0/0/580/0/75/0/a8d87fe_5475999-01-06.jpg',
        ),
      ),
      // Future column
    ],
  ),
)

示例图 #

解决方法 #

出现空白的核心原因是Image默认尺寸未匹配Container高度，或是ClipRRect与父容器圆角存在层级偏移，给你三个直接可行的方案：

方案1：强制Image尺寸匹配Container #

给Image设置和Container一致的height:100，搭配fit: BoxFit.cover避免图片变形，同时按需设置宽度：

ClipRRect(
  borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(20),
      bottomLeft: Radius.circular(20)),
  child: Image.network(
    'https://img.lemde.fr/2022/02/06/0/0/0/0/580/0/75/0/a8d87fe_5475999-01-06.jpg',
    height: 100,
    width: 150, // 根据需求调整宽度
    fit: BoxFit.cover,
  ),
)

方案2：用foregroundDecoration简化层级 #

把渐变移到foregroundDecoration里，父容器的圆角会直接约束子Image，无需额外ClipRRect，彻底避免空白：

Container(
  height: 100,
  width: double.infinity * screenWidthRatio,
  margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: blueColor, width: 3),
  ),
  foregroundDecoration: const BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    gradient: LinearGradient(
      begin: Alignment.centerRight,
      end: Alignment.centerLeft,
      colors: [
        Colors.black,
        Colors.black87,
        Colors.black54,
        Colors.transparent,
      ],
    ),
  ),
  child: Row(
    children: [
      Image.network(
        'https://img.lemde.fr/2022/02/06/0/0/0/0/580/0/75/0/a8d87fe_5475999-01-06.jpg',
        height: 100,
        fit: BoxFit.cover,
      ),
      // Future column
    ],
  ),
)

方案3：让Row子项填满高度 #

给Row添加crossAxisAlignment: CrossAxisAlignment.stretch，让Image自动填满Container的高度，配合fit: BoxFit.cover即可消除空白：

child: Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ClipRRect(
      borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(20),
          bottomLeft: Radius.circular(20)),
      child: Image.network(
        'https://img.lemde.fr/2022/02/06/0/0/0/0/580/0/75/0/a8d87fe_5475999-01-06.jpg',
        fit: BoxFit.cover,
      ),
    ),
    // Future column
  ],
),

内容的提问来源于stack exchange，提问作者Fabien