更新打鼾图显示

lib/pages/sleep_report/chart/SnoreChart.dart

@@ -82,7 +82,7 @@ class _BarChartWidgetState extends State<BarChartWidget> {
         onTapDown: (details) =>
             _handleTapOrDrag(details.localPosition, constraints.biggest),
         child: CustomPaint(
-          size: Size(double.infinity, 250.rpx),
+          size: Size(constraints.maxWidth, 250.rpx), // 使用约束的最大宽度
           painter: BarChartPainter(
             widget.data,
             widget.startTime,
@@ -133,8 +133,8 @@ class BarChartPainter extends CustomPainter {
       final y = topPadding + chartHeight - (value / maxYValue) * chartHeight;
 
       final dashPaint = Paint()
-        ..color = Colors.grey.withOpacity(0.5)
-        ..strokeWidth = 0.5;
+        ..color = Colors.grey.withOpacity(0.4)
+        ..strokeWidth = 1.rpx;
 
       drawDashedLine(
           canvas, Offset(leftPadding, y), Offset(size.width, y), dashPaint);
@@ -142,7 +142,7 @@ class BarChartPainter extends CustomPainter {
       textPainter.text = TextSpan(
         text: value.toStringAsFixed(0),
         style: TextStyle(
-          fontSize: 20.rpx,
+          fontSize: 18.rpx,
           color: themeController.currentColor.sc4,
         ),
       );
@@ -153,44 +153,68 @@ class BarChartPainter extends CustomPainter {
       );
     }
 
-    // X轴刻度
+    // X轴刻度 - 参考横线图的24小时制
     final startDate = DateTime.fromMillisecondsSinceEpoch(startTime);
     final endDate = DateTime.fromMillisecondsSinceEpoch(endTime);
-    final hourStep = const Duration(hours: 1);
-    final xAxisY = topPadding + chartHeight;
+    final xAxisY = topPadding + chartHeight; // 这是最底部的Y坐标
 
-    for (DateTime t = startDate; t.isBefore(endDate); t = t.add(hourStep)) {
-      final x = ((t.millisecondsSinceEpoch - startTime) / totalDuration) *
-              chartWidth +
-          leftPadding;
-      final timeLabel = (t == startDate || t == endDate)
-          ? DateFormat('HH:mm').format(t)
-          : DateFormat('h').format(t);
+    // 计算总小时数
+    final totalHours = endDate.difference(startDate).inHours + 1;
+    final startHour = startDate.hour;
 
-      textPainter.text = TextSpan(
-        text: timeLabel,
-        style: TextStyle(
-          fontSize: AppConstants().smaller_text_fontSize,
-          color: themeController.currentColor.sc4,
-        ),
-      );
-      textPainter.layout();
-      textPainter.paint(canvas, Offset(x - textPainter.width / 2, xAxisY + 4));
-    }
+    // 绘制X轴主线（实线）
+    final xAxisPaint = Paint()
+      ..color = Colors.grey.withOpacity(0.4)
+      ..strokeWidth = 1.rpx;
+    canvas.drawLine(
+      Offset(leftPadding, xAxisY),
+      Offset(size.width, xAxisY),
+      xAxisPaint,
+    );
 
-    // 额外终点标签
-    final endX =
-        ((endTime - startTime) / totalDuration) * chartWidth + leftPadding;
-    final endLabel = DateFormat('HH:mm').format(endDate);
+    // 绘制左右两侧时间标签（HH:mm格式）
+    final leftLabel = DateFormat('HH:mm').format(startDate);
     textPainter.text = TextSpan(
-      text: endLabel,
+      text: leftLabel,
       style: TextStyle(
-        fontSize: AppConstants().smaller_text_fontSize,
+        fontSize: 18.rpx,
         color: themeController.currentColor.sc4,
       ),
     );
     textPainter.layout();
-    textPainter.paint(canvas, Offset(endX - textPainter.width / 2, xAxisY + 4));
+    textPainter.paint(
+        canvas, Offset(leftPadding - textPainter.width / 2, xAxisY + 8.rpx));
+
+    final rightLabel = DateFormat('HH:mm').format(endDate);
+    textPainter.text = TextSpan(
+      text: rightLabel,
+      style: TextStyle(
+        fontSize: 18.rpx,
+        color: themeController.currentColor.sc4,
+      ),
+    );
+    textPainter.layout();
+    textPainter.paint(
+        canvas, Offset(size.width - textPainter.width / 2, xAxisY + 8.rpx));
+
+    // 绘制中间小时刻度（只显示小时数字）
+    for (int i = 1; i < totalHours; i++) {
+      final double x = leftPadding + chartWidth * i / totalHours;
+
+      int hourLabelNum = (startHour + i) % 24;
+      final hourLabel = '$hourLabelNum';
+
+      textPainter.text = TextSpan(
+        text: hourLabel,
+        style: TextStyle(
+          fontSize: 18.rpx,
+          color: themeController.currentColor.sc4,
+        ),
+      );
+      textPainter.layout();
+      textPainter.paint(
+          canvas, Offset(x - textPainter.width / 2, xAxisY + 8.rpx));
+    }
 
     // 柱子绘制 & 提示信息缓存
     Offset? tipOffset;
@@ -232,7 +256,10 @@ class BarChartPainter extends CustomPainter {
         final tipLeft = left + (right - left) / 2 - tipWidth / 2;
         final tipTop = top - tipHeight - 10.rpx;
 
-        tipOffset = Offset(tipLeft, tipTop);
+        // 确保tip不会超出画布顶部
+        final double adjustedTipTop = tipTop < 0 ? 0.0 : tipTop;
+
+        tipOffset = Offset(tipLeft, adjustedTipTop);
         tipSize = Size(tipWidth, tipHeight);
         tipColor = Colors.black.withOpacity(0.8);
       }