如何在Flutter中创建带圆角的六边形裁剪器

问题背景 #

想要在Flutter中创建一个带圆角的六边形裁剪器，预期效果为每个角都有平滑的圆角；目前已成功画出六边形路径，但添加圆角曲线时未达到预期效果。

当前使用的代码：

@override
Path getClip(Size size) {
  Path path = Path();

  path
    ..moveTo(size.width / 2, 0) // moving to topCenter 1st, then draw the path
    ..lineTo(size.width - 2, size.height * .25)
    ..arcToPoint(
      Offset(size.width, size.height * .25),
      radius: Radius.circular(7),
    )
    ..lineTo(size.width, size.height * .75)
    ..lineTo(size.width * .5, size.height)
    ..lineTo(0, size.height * .75)
    ..lineTo(0, size.height * .25)
    ..close();

  return path;
}

问题分析 #

原代码仅尝试处理了右上角的圆角，且路径逻辑存在问题：没有为所有六个角添加圆角处理，同时lineTo的终点位置未配合圆角弧度调整，导致圆角效果不完整、不符合预期。

解决方案 #

要实现全圆角六边形，需要为每个角计算圆角的起点和终点，通过arcToPoint连接这些点生成平滑圆角。以下是修正后的完整代码：

class RoundedHexagonalClipper extends CustomClipper<Path> {
  final double borderRadius;

  RoundedHexagonalClipper({this.borderRadius = 7.0});

  @override
  Path getClip(Size size) {
    final Path path = Path();
    final double halfWidth = size.width / 2;
    final double quarterHeight = size.height / 4;
    final double threeQuarterHeight = size.height * 3 / 4;

    // 各圆角的起点与终点坐标
    final Offset topStart = Offset(halfWidth + borderRadius, 0);
    final Offset topEnd = Offset(halfWidth - borderRadius, 0);

    final Offset topRightEnd = Offset(size.width - borderRadius, quarterHeight);
    final Offset topRightStart = Offset(size.width, quarterHeight + borderRadius);

    final Offset bottomRightStart = Offset(size.width - borderRadius, threeQuarterHeight);
    final Offset bottomRightEnd = Offset(size.width, threeQuarterHeight - borderRadius);

    final Offset bottomStart = Offset(halfWidth - borderRadius, size.height);
    final Offset bottomEnd = Offset(halfWidth + borderRadius, size.height);

    final Offset bottomLeftEnd = Offset(borderRadius, threeQuarterHeight);
    final Offset bottomLeftStart = Offset(0, threeQuarterHeight - borderRadius);

    final Offset topLeftStart = Offset(borderRadius, quarterHeight);
    final Offset topLeftEnd = Offset(0, quarterHeight + borderRadius);

    path
      ..moveTo(topStart.dx, topStart.dy)
      // 右上角直线段 + 圆角
      ..lineTo(topRightEnd.dx, topRightEnd.dy)
      ..arcToPoint(
        topRightStart,
        radius: Radius.circular(borderRadius),
        clockwise: false,
      )
      // 右下角直线段 + 圆角
      ..lineTo(bottomRightStart.dx, bottomRightStart.dy)
      ..arcToPoint(
        bottomRightEnd,
        radius: Radius.circular(borderRadius),
        clockwise: false,
      )
      // 底部直线段 + 圆角
      ..lineTo(bottomStart.dx, bottomStart.dy)
      ..arcToPoint(
        bottomEnd,
        radius: Radius.circular(borderRadius),
        clockwise: false,
      )
      // 左下角直线段 + 圆角
      ..lineTo(bottomLeftEnd.dx, bottomLeftEnd.dy)
      ..arcToPoint(
        bottomLeftStart,
        radius: Radius.circular(borderRadius),
        clockwise: false,
      )
      // 左上角直线段 + 圆角
      ..lineTo(topLeftStart.dx, topLeftStart.dy)
      ..arcToPoint(
        topLeftEnd,
        radius: Radius.circular(borderRadius),
        clockwise: false,
      )
      // 闭合路径
      ..close();

    return path;
  }

  @override
  bool shouldReclip(covariant RoundedHexagonalClipper oldClipper) {
    return oldClipper.borderRadius != borderRadius;
  }
}

代码说明 #

• 新增borderRadius参数，可灵活调整圆角大小
• 预先计算每个圆角的起点和终点，确保直线段与圆弧平滑衔接，避免出现棱角
• 设置arcToPoint的clockwise: false，保证圆弧方向贴合六边形外角
• 实现shouldReclip方法，当圆角半径变化时自动重新裁剪

使用示例 #

ClipPath(
  clipper: RoundedHexagonalClipper(borderRadius: 8.0),
  child: Container(
    width: 200,
    height: 240,
    color: Colors.blueAccent,
    child: const Center(
      child: Text(
        "圆角六边形",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

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