强宝健康模块

2026-09-28 16:40:32 +08:00
parent d52775ec10
commit 2dd89bfde0
17 changed files with 4271 additions and 1 deletions
@@ -0,0 +1,168 @@
+import 'package:flutter/material.dart';
+
+/// 强宝健康主页上的一个卡片外壳。
+///
+/// 三个卡片（减肥进度 / 当前体重 / 今日饮食）结构完全一样：
+/// 标题 + 右上角可选的附属信息 + 内容区 + 底部按钮。抽出来是为了
+/// **高度和间距自动一致** —— 各自手写一遍迟早会差几个像素。
+class HealthCard extends StatelessWidget {
+  const HealthCard({
+    super.key,
+    required this.title,
+    required this.child,
+    this.trailing,
+    this.onTap,
+    this.action,
+  });
+
+  final String title;
+
+  /// 右上角的小字，如「已减 1.8kg」
+  final Widget? trailing;
+
+  final Widget child;
+
+  /// 点卡片整体的行为（一般是进详情页）
+  final VoidCallback? onTap;
+
+  /// 底部按钮（如「+ 记一笔」）。为空时不占高度。
+  final Widget? action;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        width: double.infinity,
+        padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16),
+          boxShadow: [
+            BoxShadow(
+              color: const Color(0xFF5D4037).withValues(alpha: 0.07),
+              blurRadius: 10,
+              offset: const Offset(0, 3),
+            ),
+          ],
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    title,
+                    style: const TextStyle(
+                      fontSize: 15,
+                      fontWeight: FontWeight.w600,
+                      color: Color(0xFF5D4037),
+                    ),
+                  ),
+                ),
+                if (trailing != null)
+                  // Flexible：右侧小字是「锦上添花」，空间不够时它该先让位，
+                  // 而不是把标题挤到溢出
+                  Flexible(child: trailing!),
+                if (onTap != null)
+                  const Padding(
+                    padding: EdgeInsets.only(left: 2),
+                    child: Icon(Icons.chevron_right,
+                        size: 18, color: Color(0xFFBCAAA4)),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            child,
+            if (action != null) ...[
+              const SizedBox(height: 12),
+              action!,
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// 一条横向的进度条（减肥进度 / 时间进度共用）
+///
+/// [value] 会被夹到 0~1：后端虽然已经 Clamp 过，但这里再兜一次，
+/// 免得某天后端改了什么导致宽度溢出。
+class HealthProgressBar extends StatelessWidget {
+  const HealthProgressBar({
+    super.key,
+    required this.value,
+    this.color = const Color(0xFFC8956E),
+    this.height = 8,
+    this.background = const Color(0xFFF0EAE4),
+  });
+
+  final double value;
+  final Color color;
+  final double height;
+  final Color background;
+
+  @override
+  Widget build(BuildContext context) {
+    final safe = value.isFinite ? value.clamp(0.0, 1.0) : 0.0;
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(height / 2),
+      child: LinearProgressIndicator(
+        value: safe,
+        minHeight: height,
+        backgroundColor: background,
+        valueColor: AlwaysStoppedAnimation<Color>(color),
+      ),
+    );
+  }
+}
+
+/// 一个「标签 + 数值」的小块，卡片里成排用
+class HealthStat extends StatelessWidget {
+  const HealthStat({
+    super.key,
+    required this.label,
+    required this.value,
+    this.unit,
+    this.valueColor = const Color(0xFF5D4037),
+  });
+
+  final String label;
+  final String value;
+  final String? unit;
+  final Color valueColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label,
+            style: const TextStyle(fontSize: 11.5, color: Color(0xFF8D6E63))),
+        const SizedBox(height: 3),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.baseline,
+          textBaseline: TextBaseline.alphabetic,
+          children: [
+            Text(
+              value,
+              style: TextStyle(
+                fontSize: 17,
+                fontWeight: FontWeight.bold,
+                color: valueColor,
+              ),
+            ),
+            if (unit != null) ...[
+              const SizedBox(width: 2),
+              Text(unit!,
+                  style: const TextStyle(
+                      fontSize: 11.5, color: Color(0xFF8D6E63))),
+            ],
+          ],
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../providers/health_provider.dart';
+
+/// 首页仪表盘上「强宝健康」卡片的摘要：当前体重 + 今日热量。
+///
+/// 只是两个数字，所以单独取 —— 不复用主页那套 provider（那些会拉明细），
+/// 为了一行字把整天饮食记录取回来是不划算的。
+class HealthModuleSummary extends ConsumerWidget {
+  const HealthModuleSummary({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final goal = ref.watch(weightGoalProvider).value;
+    final totals = ref.watch(dietTodayTotalsProvider).value;
+
+    final weight = goal?.currentWeight;
+
+    return Row(
+      children: [
+        Expanded(
+          child: _item(
+            '当前体重',
+            weight == null ? null : '${_fmt(weight)} kg',
+          ),
+        ),
+        Expanded(
+          child: _item(
+            '今日热量',
+            totals == null || totals.itemCount == 0
+                ? null
+                : '${_fmt(totals.energyKcal)} kcal',
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _item(String label, String? value) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(label,
+            style: const TextStyle(fontSize: 11, color: Color(0xFF8D6E63))),
+        const SizedBox(height: 3),
+        Text(
+          value ?? '--',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            fontSize: 14.5,
+            fontWeight: FontWeight.bold,
+            color: Color(0xFF5D4037),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+String _fmt(num value) {
+  if (value == value.roundToDouble()) return value.round().toString();
+  return value.toStringAsFixed(1);
+}
@@ -0,0 +1,200 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+
+import '../../../models/health.dart';
+
+/// 体重折线图（含理想目标线）。
+///
+/// 和 `donut_chart.dart` 一个纪律：**fl_chart 的类型只出现在这个文件里**。
+/// 页面只传数据进来，升级图表库时只需要改这一处。
+///
+/// 两条线：
+///   · 实测体重（实线，圆点）
+///   · 理想体重（虚线，来自目标）—— 一眼看出「落后了还是超前了」
+class WeightLineChart extends StatelessWidget {
+  const WeightLineChart({
+    super.key,
+    required this.points,
+    this.idealCurve = const [],
+    this.height = 220,
+  });
+
+  /// 实测体重点（按日期升序）
+  final List<WeightPoint> points;
+
+  /// 理想体重曲线，为空就不画
+  final List<WeightPoint> idealCurve;
+
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    if (points.isEmpty) {
+      return SizedBox(
+        height: height,
+        child: const Center(
+          child: Text(
+            '还没有体重记录',
+            style: TextStyle(fontSize: 13, color: Color(0xFFBCAAA4)),
+          ),
+        ),
+      );
+    }
+
+    // X 轴用「距首日天数」而不是时间戳：时间戳在 fl_chart 里是毫秒级的大数，
+    // 坐标轴标签会很难格式化，换算成天数后间隔和标签都很直观。
+    final base = points.first.date;
+    double dayOf(DateTime d) => d.difference(base).inDays.toDouble();
+
+    final actual = points
+        .map((p) => FlSpot(dayOf(p.date), p.weight))
+        .toList(growable: false);
+
+    // 理想曲线的起点可能早于实测（比如先设目标后开始记体重），
+    // 所以基准日要取两者更早的那个，否则理想线会被挤到左边界外
+    final ideal = <FlSpot>[];
+    for (final p in idealCurve) {
+      final x = dayOf(p.date);
+      // 只画在实测数据的可见区间内，避免 X 轴被拉得过长
+      if (x >= 0 && x <= dayOf(points.last.date)) {
+        ideal.add(FlSpot(x, p.weight));
+      }
+    }
+
+    final (minY, maxY) = _yRange(actual, ideal);
+    final maxX = dayOf(points.last.date);
+
+    return SizedBox(
+      height: height,
+      child: LineChart(
+        LineChartData(
+          minX: 0,
+          maxX: maxX <= 0 ? 1 : maxX,
+          minY: minY,
+          maxY: maxY,
+          gridData: FlGridData(
+            show: true,
+            drawVerticalLine: false,
+            horizontalInterval: ((maxY - minY) / 4).clamp(0.5, 100),
+            getDrawingHorizontalLine: (_) => const FlLine(
+              color: Color(0xFFF0EAE4),
+              strokeWidth: 1,
+            ),
+          ),
+          borderData: FlBorderData(show: false),
+          titlesData: FlTitlesData(
+            topTitles: const AxisTitles(),
+            rightTitles: const AxisTitles(),
+            leftTitles: AxisTitles(
+              sideTitles: SideTitles(
+                showTitles: true,
+                reservedSize: 40,
+                interval: ((maxY - minY) / 4).clamp(0.5, 100),
+                getTitlesWidget: (value, meta) => Text(
+                  value.toStringAsFixed(1),
+                  style: const TextStyle(
+                      fontSize: 10.5, color: Color(0xFFBCAAA4)),
+                ),
+              ),
+            ),
+            bottomTitles: AxisTitles(
+              sideTitles: SideTitles(
+                showTitles: true,
+                reservedSize: 26,
+                // 最多标 4 个日期，再多会挤成一团
+                interval: maxX <= 0 ? 1 : (maxX / 3).ceilToDouble(),
+                getTitlesWidget: (value, meta) {
+                  final date = base.add(Duration(days: value.round()));
+                  return Padding(
+                    padding: const EdgeInsets.only(top: 6),
+                    child: Text(
+                      '${date.month}-${date.day}',
+                      style: const TextStyle(
+                          fontSize: 10.5, color: Color(0xFFBCAAA4)),
+                    ),
+                  );
+                },
+              ),
+            ),
+          ),
+          lineTouchData: LineTouchData(
+            touchTooltipData: LineTouchTooltipData(
+              getTooltipColor: (_) => const Color(0xFF5D4037),
+              getTooltipItems: (spots) => spots.map((spot) {
+                final date = base.add(Duration(days: spot.x.round()));
+                return LineTooltipItem(
+                  '${date.month}月${date.day}日\n${spot.y.toStringAsFixed(1)} kg',
+                  const TextStyle(
+                      color: Colors.white, fontSize: 12, height: 1.5),
+                );
+              }).toList(),
+            ),
+          ),
+          lineBarsData: [
+            // 实测：实线 + 圆点
+            LineChartBarData(
+              spots: actual,
+              isCurved: true,
+              curveSmoothness: 0.25,
+              preventCurveOverShooting: true,
+              color: const Color(0xFFC8956E),
+              barWidth: 2.6,
+              isStrokeCapRound: true,
+              dotData: FlDotData(
+                // 点多了就不画圆点，否则整条线会变成一串珠子
+                show: actual.length <= 20,
+                getDotPainter: (spot, percent, bar, index) =>
+                    FlDotCirclePainter(
+                  radius: 3,
+                  color: Colors.white,
+                  strokeWidth: 2,
+                  strokeColor: const Color(0xFFC8956E),
+                ),
+              ),
+              belowBarData: BarAreaData(
+                show: true,
+                color: const Color(0xFFC8956E).withValues(alpha: 0.1),
+              ),
+            ),
+            // 理想：虚线、不带点 —— 视觉上明确区分「这是参照不是实测」
+            if (ideal.length >= 2)
+              LineChartBarData(
+                spots: ideal,
+                isCurved: false,
+                color: const Color(0xFF4FA98A),
+                barWidth: 1.6,
+                dashArray: const [5, 4],
+                dotData: const FlDotData(show: false),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Y 轴范围：把实测点和理想线都包进来，上下各留 10% 余量。
+  ///
+  /// 余量是必要的 —— 贴着边框的线看不出趋势，而且圆点会被裁掉半个。
+  (double, double) _yRange(List<FlSpot> actual, List<FlSpot> ideal) {
+    final values = <double>[
+      ...actual.map((s) => s.y),
+      ...ideal.map((s) => s.y),
+    ];
+    if (values.isEmpty) return (0, 100);
+
+    var min = values.first;
+    var max = values.first;
+    for (final v in values) {
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+
+    // 所有点都一样重（用户连着记了几天同一个数）时给一个固定跨度，
+    // 否则 maxY == minY 会让图表算出 NaN
+    if ((max - min).abs() < 0.1) {
+      return (min - 1, max + 1);
+    }
+    final pad = (max - min) * 0.1;
+    return (min - pad, max + pad);
+  }
+}