仪表盘 优化

lib/features/home/presentation/pages/running_status_page.dart

@@ -848,7 +848,7 @@ class _RunningStatusPageState extends State<RunningStatusPage> {
   }
 }
 
-// ====================== 圆形仪表盘绘制器（匹配目标样式） ======================
+// ====================== 圆形仪表盘绘制器（修正指针样式） ======================
 class CircularGaugePainter extends CustomPainter {
   final double value;
   final double maxValue;
@@ -922,25 +922,43 @@ class CircularGaugePainter extends CustomPainter {
       }
     }
 
-    // 4. 绘制指针
+    // 4. 计算指针角度
     final needleAngle = 135 * math.pi / 180 + 270 * math.pi / 180 * progressRatio;
+
+    // 5. 绘制三角形指针（细尖角指向刻度，宽底边在中心）
     final needlePaint = Paint()
-      ..color = Colors.grey.shade400
+      ..color = Colors.grey.shade600
       ..style = PaintingStyle.fill;
 
-    // 指针形状（三角形）
+    // 调整三角形顶点和底边位置：细尖角指向刻度，宽底边在中心
     final needlePath = Path()
-      ..moveTo(center.dx, center.dy)
+      // 1. 移动画笔到指针的细尖角（指向刻度的一端）
-      ..lineTo(center.dx + (radius - 20) * math.cos(needleAngle - 0.02), center.dy + (radius - 20) * math.sin(needleAngle - 0.02))
+      ..moveTo(center.dx + (radius - 6) * math.cos(needleAngle), center.dy + (radius - 6) * math.sin(needleAngle))
-      ..lineTo(center.dx + (radius - 20) * math.cos(needleAngle + 0.02), center.dy + (radius - 20) * math.sin(needleAngle + 0.02))
+      // 2. 绘制第一条边：从尖角到中心左侧的底边端点
+      ..lineTo(
+        center.dx + 8 * math.cos(needleAngle - math.pi / 2), // 中心左侧8px
+        center.dy + 8 * math.sin(needleAngle - math.pi / 2),
+      )
+      // 3. 绘制第二条边：从中心左侧端点到中心右侧的底边端点
+      ..lineTo(
+        center.dx + 8 * math.cos(needleAngle + math.pi / 2), // 中心右侧8px
+        center.dy + 8 * math.sin(needleAngle + math.pi / 2),
+      )
+      // 4. 闭合路径：回到尖角，形成三角形
       ..close();
+
     canvas.drawPath(needlePath, needlePaint);
 
-    // 5. 绘制指针中心圆点
+    //// 6. 绘制指针中心圆点（可选，增强视觉效果）
-    final centerDotPaint = Paint()
+    //final centerDotPaint = Paint()
-      ..color = Colors.grey.shade400
+    //  ..color = Colors.white
+    //  ..style = PaintingStyle.fill;
+    //canvas.drawCircle(center, 4, centerDotPaint);
+    // 内层小圆点增加层次感
+    final innerDotPaint = Paint()
+      ..color = Colors.white
       ..style = PaintingStyle.fill;
-    canvas.drawCircle(center, 6, centerDotPaint);
+    canvas.drawCircle(center, 5, innerDotPaint);
   }
 
   @override