如何消除Column组件中ClipOval Widget间的垂直间距

你遇到的两个ClipOval之间存在间距，核心原因是Column设置了mainAxisSize: MainAxisSize.max后会占满父容器全部高度，默认的mainAxisAlignment: MainAxisAlignment.start会让子组件靠顶部排列，剩余空间会留在子组件之间，形成视觉上的间距。另外你自定义的裁剪器逻辑错误，才导致图片被完全移除。

让两个ClipOval无空隙的解决方案 #

根据你的需求（完全无空隙），可以用以下两种方法实现：

方法1：让Column仅包裹子组件高度（紧密相切）

如果希望两个圆形垂直紧密排列（边缘相切），只需让Column仅占用子组件的总高度，避免多余空间产生：

Column(
  mainAxisSize: MainAxisSize.min, // 让Column仅包裹子组件，不占满父容器
  children: [
    ClipOval(
      child: SizedBox.fromSize(
        size: const Size.fromRadius(100),
        child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
      ),
    ),
    ClipOval(
      child: SizedBox.fromSize(
        size: const Size.fromRadius(100),
        child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
      ),
    )
  ],
)

方法2：偏移第二个圆形实现完全重叠

如果需要两个圆形完全重叠（无任何空隙），可以用Transform.translate将第二个圆形向上偏移一个半径的距离：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    ClipOval(
      child: SizedBox.fromSize(
        size: const Size.fromRadius(100),
        child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
      ),
    ),
    Transform.translate(
      offset: const Offset(0, -100), // 向上偏移等于圆形半径的距离
      child: ClipOval(
        child: SizedBox.fromSize(
          size: const Size.fromRadius(100),
          child: Image.asset('assets/images/home_logo.png', fit: BoxFit.cover),
        ),
      ),
    )
  ],
)

自定义裁剪器的错误修正 #

你写的MyClip裁剪器逻辑有误：Rect.fromLTWH(100, 0, 100, 100)仅裁剪图片右上角100x100的区域，而你的容器是200x200，这会导致大部分图片被裁掉。如果要自定义圆形裁剪，应该使用CustomClipper<Path>并绘制圆形路径：

class MyClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..addOval(Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: size.width/2));
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

内容的提问来源于stack exchange，提问作者anibal-bojorquez