如何用Flutter自定义Clipper实现对称的容器底部裁剪UI？

问题背景 #

要给容器实现底部裁剪效果，但不同设备宽度下尾部间距不一致：要么圆形被裁切，要么多出一段直线，导致UI不对称。现有代码仅能实现部分效果：

import 'package:flutter/material.dart';

class CardClipper extends CustomClipper<Path> {
  CardClipper();

  @override
  Path getClip(Size size) {
    final path = Path()
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    const radius = 11.0;
    double lineOffset = 22;
    const diameter = 2 * radius;

    final holePath = Path();

       var curXPos = 0.0;
       while (curXPos < size.width && ((curXPos + diameter) < size.width)) {
         final dx = lineOffset + curXPos;
         holePath.addOval(
           Rect.fromCircle(
             center: Offset(dx, height),
             radius: radius,
           ),
         );
         curXPos = dx + lineOffset / 2;
       }

    return Path.combine(PathOperation.difference, path, holePath);
  }

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

解决方案 #

核心问题是原代码未计算左右对称留白，导致不同宽度下圆形排列首尾间距失衡。通过先计算留白，再均匀分配圆形位置即可解决：

修改后的完整代码 #

import 'package:flutter/material.dart';

class CardClipper extends CustomClipper<Path> {
  // 圆形半径，可自定义
  final double radius;
  // 相邻圆形中心的间距，可自定义
  final double spacing;

  CardClipper({this.radius = 11.0, this.spacing = 33.0});

  @override
  Path getClip(Size size) {
    // 绘制容器基础矩形路径
    final path = Path()
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..close();

    final diameter = 2 * radius;
    // 计算当前宽度下能容纳的圆形数量
    final circleCount = (size.width / spacing).floor();
    if (circleCount <= 0) return path;

    // 计算左右对称的留白，保证首尾间距一致
    final sidePadding = (size.width - circleCount * spacing) / 2;

    final holePath = Path();
    var currentX = sidePadding;

    // 循环绘制所有圆形
    for (int i = 0; i < circleCount; i++) {
      holePath.addOval(
        Rect.fromCircle(
          center: Offset(currentX, size.height),
          radius: radius,
        ),
      );
      currentX += spacing;
    }

    // 用基础路径减去圆形路径，得到裁剪效果
    return Path.combine(PathOperation.difference, path, holePath);
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>
      oldClipper is CardClipper &&
      (oldClipper.radius != radius || oldClipper.spacing != spacing);
}

关键优化点 #

• 对称留白计算：通过(容器宽度 - 圆形总占用宽度) / 2得到左右留白，确保首尾间距完全一致
• 参数解耦：把固定值拆成可自定义的radius和spacing参数，方便调整UI效果
• 循环逻辑优化：改为按数量遍历，避免原while循环的边界判断错误
• 修复代码问题：修正了原代码中未定义的height变量（改为size.height）
• 重绘优化：仅当radius或spacing变化时才触发重绘，提升性能

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