Flutter复杂布局实现求助：带异形分隔的双图并排布局

嘿，这个需求我刚好折腾过类似的，用CustomClipper完全能搞定！我给你拆解下具体思路，再附上代码示例，你一看就懂～

核心思路 #

本质上就是给左右两张图片分别裁剪出互补的边缘形状，然后用Row把它们拼在一起，这样中间就会形成你想要的分隔效果。比如左边图片右侧裁成凹形，右边图片左侧裁成对应的凸形，两者拼接后就能完美贴合出独特的分隔线。

具体实现步骤 #

1. 定义互补的CustomClipper #

首先要写两个自定义裁剪器，分别处理左右图片的边缘：

• 左边图片的裁剪器：负责把图片的右侧边缘裁成你想要的凹/特殊形状
• 右边图片的裁剪器：负责把图片的左侧边缘裁成和左边互补的形状

2. 在Row中组合ClipPath和Image #

用Row包裹两个ClipPath组件（可以用Expanded让它们平分宽度，也可以设置固定宽度），每个ClipPath里放Image组件，并分别应用对应的裁剪器。

代码示例（波浪形分隔为例） #

先写两个裁剪器：

// 左侧图片裁剪器：右侧边缘做凹波浪
class LeftImageClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角开始绘制路径
    path.moveTo(0, 0);
    // 直线到右上角的起始裁剪点
    path.lineTo(size.width - 20, 0);
    // 用二次贝塞尔曲线画凹进去的波浪
    path.quadraticBezierTo(
      size.width, size.height / 2, // 控制点
      size.width - 20, size.height, // 结束点
    );
    // 直线到左下角，闭合路径
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

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

// 右侧图片裁剪器：左侧边缘做凸波浪（和左边互补）
class RightImageClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从右上角开始绘制路径
    path.moveTo(size.width, 0);
    // 直线到左上角的起始裁剪点
    path.lineTo(20, 0);
    // 用二次贝塞尔曲线画凸出来的波浪
    path.quadraticBezierTo(
      0, size.height / 2, // 控制点
      20, size.height, // 结束点
    );
    // 直线到右下角，闭合路径
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

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

然后在布局中使用：

Row(
  children: [
    Expanded(
      child: ClipPath(
        clipper: LeftImageClipper(),
        child: Image.network(
          'https://example.com/left-image.jpg', // 替换成你的图片地址
          fit: BoxFit.cover,
          height: 250, // 统一图片高度
        ),
      ),
    ),
    Expanded(
      child: ClipPath(
        clipper: RightImageClipper(),
        child: Image.network(
          'https://example.com/right-image.jpg', // 替换成你的图片地址
          fit: BoxFit.cover,
          height: 250,
        ),
      ),
    ),
  ],
)

调整形状的小技巧 #

• 如果你想要斜角、锯齿或者其他形状，只需要修改getClip方法里的Path绘制逻辑就行。比如用lineTo画直线段组合成斜角，或者用多个quadraticBezierTo做连续波浪。
• 调整代码里的数值（比如示例中的20）可以改变形状的幅度，数值越大，波浪/斜角的程度越明显。
• 要是需要响应式的形状，可以基于size的比例来计算控制点，比如size.width * 0.1代替固定的20。

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