如何用Flutter Path绘制带弧形顶点的倒三角形？

AI 小北

2026-7-18

解决方案

你当前的代码生成的是直角顶点的倒三角形，要实现带弧形顶点的效果，需要用圆弧或贝塞尔曲线替换原本的直线连接，以下是两种实用实现方式：

方式1：用圆弧实现精准可控的弧形顶点

这种方式可以通过调整半径参数，精准控制弧形的弧度大小：

import 'dart:math' as math;

Path getClip(Size size) {
  final path = Path();
  final arcRadius = 16.0; // 可根据UI需求调整弧形半径

  // 从左上角画直线到右上角
  path.lineTo(size.width, 0.0);

  // 从右上角画直线到弧形右侧的起始点
  path.lineTo(size.width / 2 + arcRadius, size.height - arcRadius);

  // 绘制底部的弧形：以底部偏上的点为圆心，画180度半圆
  path.arcTo(
    Rect.fromCircle(
      center: Offset(size.width / 2, size.height - arcRadius),
      radius: arcRadius,
    ),
    0, // 起始角度（0对应右方向）
    math.pi, // 扫过角度（π即180度，从右向左画半圆）
    false,
  );

  // 从弧形左侧起始点画直线回左上角
  path.lineTo(0.0, 0.0);

  path.close();
  return path;
}

方式2：用二次贝塞尔曲线实现平滑弧形

如果不需要精准控制半径，贝塞尔曲线可以更简洁地实现自然平滑的弧形：

Path getClip(Size size) {
  final path = Path();
  final curveDepth = 12.0; // 数值越大，弧形向下凹陷的程度越明显

  // 从左上角画直线到右上角
  path.lineTo(size.width, 0.0);

  // 绘制二次贝塞尔曲线：通过底部中心的控制点连接右上角与左上角
  path.quadraticBezierTo(
    size.width / 2, // 控制点x坐标（底部中心）
    size.height + curveDepth, // 控制点y坐标（控制凹陷深度）
    0.0, // 终点x坐标（左上角）
    0.0, // 终点y坐标（左上角）
  );

  path.close();
  return path;
}