Flutter雷达图修改：实现奔驰三叉星样式的外边框效果

方案一：直接用Path自定义绘制（推荐） #

flutter_radar_chart是为雷达图设计的，强行修改反而绕弯路，直接用CustomPainter画更灵活，完全匹配你的需求：

class MercedesStarPainter extends CustomPainter {
  final Color borderColor;
  final double borderWidth;
  final double radius;

  MercedesStarPainter({
    required this.borderColor,
    required this.borderWidth,
    required this.radius,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final paint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth
      ..strokeCap = StrokeCap.round; // 可选，让边角更圆润

    final path = Path();
    // 箭头宽度的角度偏移（可自行调整，数值越小箭头越窄）
    const arrowAngleOffset = 15 * pi / 180;
    // 三个箭头的主方向角度（0°、120°、240°）
    final angles = [0, 120, 240].map((deg) => deg * pi / 180).toList();

    for (final angle in angles) {
      // 计算每个箭头外侧的两个端点
      final leftPoint = Offset(
        center.dx + radius * cos(angle - arrowAngleOffset),
        center.dy + radius * sin(angle - arrowAngleOffset),
      );
      final rightPoint = Offset(
        center.dx + radius * cos(angle + arrowAngleOffset),
        center.dy + radius * sin(angle + arrowAngleOffset),
      );
      // 拼接路径
      if (path.isEmpty) {
        path.moveTo(leftPoint.dx, leftPoint.dy);
      } else {
        path.lineTo(leftPoint.dx, leftPoint.dy);
      }
      path.lineTo(rightPoint.dx, rightPoint.dy);
    }
    // 闭合路径，连接最后一个箭头右端点到第一个箭头左端点
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant MercedesStarPainter oldDelegate) {
    return oldDelegate.borderColor != borderColor ||
        oldDelegate.borderWidth != borderWidth ||
        oldDelegate.radius != radius;
  }
}

使用示例：

Container(
  width: 200,
  height: 200,
  child: CustomPaint(
    painter: MercedesStarPainter(
      borderColor: Colors.black,
      borderWidth: 4,
      radius: 80,
    ),
  ),
)

这个代码直接绘制三叉星的外侧边框，无任何内部连线，参数可灵活调整大小、颜色和边框宽度。

方案二：基于flutter_radar_chart的近似修改 #

如果一定要用这个库，只能实现近似的三角形边框（无法直接生成三叉星箭头形状），修改方式如下：

RadarChart(
  ticks: const [0, 1],
  features: const ['', '', ''],
  data: [
    [1, 1, 1], // 三个轴拉满到最大半径
  ],
  showLines: false, // 关闭中心到顶点的连线
  showBorder: true, // 保留外侧三角形边框
  borderColor: Colors.black,
  borderWidth: 4,
  // 隐藏无关元素
  tickColor: Colors.transparent,
  featureTextStyle: const TextStyle(color: Colors.transparent),
  dataPointColor: Colors.transparent,
)

注意：这种方式只能得到等边三角形边框，和奔驰三叉星的箭头形状有差异，更推荐方案一。

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