Flutter中如何实现ClipPath反向裁剪？裁剪路径内部保留外部

反转裁剪的实现 #

Flutter的ClipPath本身没有直接的反转裁剪参数，但可以通过Path.combine方法结合路径差集，实现“裁剪路径内部、保留外部”的效果：

自定义反转裁剪器 #

创建一个CustomClipper，通过将覆盖整个控件的矩形路径与目标裁剪路径做差集，得到反转后的裁剪区域：

class ReverseClipper extends CustomClipper<Path> {
  final Path targetPath;

  ReverseClipper(this.targetPath);

  @override
  Path getClip(Size size) {
    // 创建覆盖整个裁剪区域的矩形路径
    final fullRectPath = Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height));
    // 用矩形路径减去目标路径，得到反转后的裁剪路径
    return Path.combine(PathOperation.difference, fullRectPath, targetPath);
  }

  @override
  bool shouldReclip(covariant ReverseClipper oldClipper) {
    return oldClipper.targetPath != targetPath;
  }
}

使用反转裁剪器 #

将需要裁剪的组件包裹在ClipPath中，传入自定义的反转裁剪器：

ClipPath(
  clipper: ReverseClipper(yourTargetClipPath), // 传入你原本用来裁剪的路径
  child: YourWidgetToClip,
)

复刻TextFormField标签效果的最优方案 #

其实不需要复杂的反转裁剪，用Stack配合背景色覆盖的方式更简洁高效，能直接实现“标签覆盖边框、隐藏下方线条”的效果：

Stack(
  alignment: Alignment.topLeft,
  children: [
    // 带边框的输入框容器
    Container(
      height: 56,
      margin: const EdgeInsets.only(top: 8), // 给标签留出空间
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade400),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        ),
      ),
    ),
    // 标签：用背景色覆盖下方的边框线条
    Container(
      margin: const EdgeInsets.only(left: 16),
      padding: const EdgeInsets.symmetric(horizontal: 4),
      color: Colors.white, // 与页面背景色保持一致
      child: const Text(
        '用户名',
        style: TextStyle(fontSize: 14, color: Colors.grey),
      ),
    ),
  ],
)

如果一定要用反转裁剪实现，可将边框容器用ReverseClipper裁剪掉标签所在区域，再将标签放在上层：

Stack(
  alignment: Alignment.topLeft,
  children: [
    ClipPath(
      clipper: ReverseClipper(Path()
        ..addRect(const Rect.fromLTWH(16, 0, 60, 16))), // 标签的位置和大小路径
      child: Container(
        height: 56,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade400),
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
    // 标签
    const Padding(
      padding: EdgeInsets.only(left: 16, top: 0),
      child: Text(
        '用户名',
        style: TextStyle(fontSize: 14, color: Colors.grey),
      ),
    ),
    // 输入框内容
    const Positioned(
      left: 16,
      top: 16,
      right: 16,
      child: TextField(
        decoration: InputDecoration(border: InputBorder.none),
      ),
    ),
  ],
)

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