Flutter 如何实现两个Container容器角部反向相交的切角效果

以下是两种常见开发场景下的实现方案： #

场景1：Flutter 实现 #

思路是通过自定义裁剪+Stack层级叠加实现边角咬合效果，步骤如下：

• 用Stack组件包裹两个Container，调整定位让两个容器的相邻边角对齐
• 自定义ShapeBorder或者使用CustomClipper<Path>给上方Container的对应边角裁剪出凹圆角
• 给下方Container的对应边角设置相同半径的凸圆角，保证两者完全贴合
• 重叠区域的颜色和下方Container保持一致，即可实现无缝衔接效果

示例代码片段：

// 自定义凹圆角裁剪器
class ConcaveCornerClipper extends CustomClipper<Path> {
  final double radius;
  ConcaveCornerClipper({required this.radius});

  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height - radius);
    // 绘制右下角凹圆弧
    path.arcToPoint(
      Offset(size.width - radius, size.height),
      radius: Radius.circular(radius),
      clockwise: false,
    );
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

// 页面使用示例
Stack(
  children: [
    // 上方Container
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: ClipPath(
        clipper: ConcaveCornerClipper(radius: 16),
        child: Container(
          height: 200,
          color: Colors.blue,
        ),
      ),
    ),
    // 下方Container
    Positioned(
      top: 200,
      left: 0,
      right: 0,
      child: Container(
        height: 300,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(16)),
        ),
      ),
    )
  ],
)

场景2：Web CSS 实现 #

思路是通过绝对定位叠加+径向渐变实现凹圆角，步骤如下：

• 两个容器设置绝对定位，调整位置让相邻边角对齐
• 上方容器通过径向渐变在对应边角绘制和下方容器同色的凹圆弧
• 下方容器直接设置对应边角的圆角即可

示例代码片段：

/* 上方容器 */
.top-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: radial-gradient(circle at bottom right, transparent 16px, #1677ff 0);
}

/* 下方容器 */
.bottom-container {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 300px;
  background: #fff;
  border-top-left-radius: 16px;
}

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