请添加图片描述

前言

血压趋势分析对于高血压患者和关注心血管健康的人群非常重要。通过长期追踪血压数据，用户可以了解自己的血压波动规律，及时发现异常情况。

这篇文章会讲解血压趋势页面的实现，包括平均血压展示、状态评估和健康建议等功能。

页面整体结构

血压趋势页面包含汇总数据卡片和分析建议两个主要部分。

class BloodPressureTrendPage extends StatelessWidget {
  const BloodPressureTrendPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFAFAFC),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios_rounded, size: 20.w), 
          onPressed: () => Get.back()
        ),
        title: Text('血压趋势', style: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20.w),
        child: Column(
          children: [
            _buildSummaryCard(),
            SizedBox(height: 20.h),
            _buildAnalysis(),
          ],
        ),
      ),
    );
  }
}

页面结构简洁，两个卡片垂直排列。汇总卡片展示平均血压和状态，分析卡片提供健康建议。

平均血压汇总卡片

汇总卡片展示本周的平均血压值和状态评估。

Widget _buildSummaryCard() {
  return Container(
    padding: EdgeInsets.all(20.w),
    decoration: BoxDecoration(
      color: Colors.white, 
      borderRadius: BorderRadius.circular(20.r)
    ),
    child: Column(
      children: [
        Text('本周平均', style: TextStyle(fontSize: 13.sp, color: Colors.grey[500])),
        SizedBox(height: 8.h),
        Text('119/79 mmHg', style: TextStyle(
          fontSize: 28.sp, 
          fontWeight: FontWeight.w700, 
          color: const Color(0xFF1A1A2E)
        )),
        SizedBox(height: 8.h),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h),
          decoration: BoxDecoration(
            color: const Color(0xFF00C9A7).withOpacity(0.12), 
            borderRadius: BorderRadius.circular(12.r)
          ),
          child: Text('血压正常', style: TextStyle(
            fontSize: 12.sp, 
            color: const Color(0xFF00C9A7)
          )),
        ),
      ],
    ),
  );
}

平均血压使用 28sp 的大字号居中显示，格式为"收缩压/舒张压 mmHg"。状态标签用绿色表示正常，如果血压偏高或偏低可以换成其他颜色。

卡片整体居中对齐，视觉上比较稳重，适合展示这种重要的健康数据。

血压状态判断

根据血压值判断状态，需要同时考虑收缩压和舒张压：

Map<String, dynamic> _getBloodPressureStatus(int systolic, int diastolic) {
  if (systolic < 90 || diastolic < 60) {
    return {
      'status': '血压偏低',
      'color': const Color(0xFF4D96FF),
      'level': 'low'
    };
  } else if (systolic < 120 && diastolic < 80) {
    return {
      'status': '血压正常',
      'color': const Color(0xFF00C9A7),
      'level': 'normal'
    };
  } else if (systolic < 140 || diastolic < 90) {
    return {
      'status': '血压偏高',
      'color': const Color(0xFFFFBE0B),
      'level': 'elevated'
    };
  } else {
    return {
      'status': '血压过高',
      'color': const Color(0xFFFF6B6B),
      'level': 'high'
    };
  }
}

这个方法根据医学标准判断血压状态：收缩压低于 90 或舒张压低于 60 为偏低，收缩压低于 120 且舒张压低于 80 为正常，收缩压 120-139 或舒张压 80-89 为偏高，更高则为过高。

不同状态用不同颜色标识，让用户能直观地了解自己的血压状况。

分析建议卡片

分析建议卡片根据血压状态给出个性化的健康建议。

Widget _buildAnalysis() {
  return Container(
    padding: EdgeInsets.all(20.w),
    decoration: BoxDecoration(
      color: Colors.white, 
      borderRadius: BorderRadius.circular(20.r)
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('分析建议', style: TextStyle(
          fontSize: 16.sp, 
          fontWeight: FontWeight.w600, 
          color: const Color(0xFF1A1A2E)
        )),
        SizedBox(height: 16.h),
        _buildTip('您的血压处于正常范围内'),
        _buildTip('建议继续保持健康的生活方式'),
        _buildTip('每天定时测量血压'),
      ],
    ),
  );
}

Widget _buildTip(String text) {
  return Padding(
    padding: EdgeInsets.only(bottom: 12.h),
    child: Row(
      children: [
        Icon(Icons.check_circle_outline_rounded, size: 18.w, color: const Color(0xFF00C9A7)),
        SizedBox(width: 10.w),
        Expanded(
          child: Text(text, style: TextStyle(fontSize: 14.sp, color: Colors.grey[700]))
        ),
      ],
    ),
  );
}

每条建议前面用绿色的勾选图标，表示这是正面的健康提示。建议内容根据血压状态动态生成，给用户提供有针对性的指导。

动态生成建议

根据不同的血压状态，生成不同的健康建议：

List<String> _generateTips(String level) {
  switch (level) {
    case 'low':
      return [
        '您的血压偏低，注意补充水分',
        '避免突然站起，防止头晕',
        '适当增加盐分摄入',
        '如持续偏低，建议就医检查',
      ];
    case 'normal':
      return [
        '您的血压处于正常范围内',
        '建议继续保持健康的生活方式',
        '每天定时测量血压',
      ];
    case 'elevated':
      return [
        '您的血压略高于正常值',
        '建议减少盐分摄入',
        '保持规律运动，控制体重',
        '避免熬夜，保证充足睡眠',
      ];
    case 'high':
      return [
        '您的血压偏高，请注意',
        '建议尽快就医检查',
        '严格控制饮食，减少盐分',
        '避免剧烈运动和情绪激动',
      ];
    default:
      return ['定期监测血压，关注健康'];
  }
}

不同状态的建议内容不同，偏低时提醒补充水分和盐分，偏高时提醒控制饮食和就医。这种个性化的建议比通用的健康提示更有价值。

血压波动分析

除了平均值，血压的波动情况也很重要。可以添加一个波动分析的展示：

Widget _buildVariabilityCard() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.r),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('血压波动', style: TextStyle(
          fontSize: 14.sp,
          fontWeight: FontWeight.w500,
          color: const Color(0xFF1A1A2E),
        )),
        SizedBox(height: 12.h),
        Row(
          children: [
            _buildVariabilityItem('收缩压', '115-125', 'mmHg'),
            SizedBox(width: 20.w),
            _buildVariabilityItem('舒张压', '75-82', 'mmHg'),
          ],
        ),
        SizedBox(height: 12.h),
        Container(
          padding: EdgeInsets.all(10.w),
          decoration: BoxDecoration(
            color: const Color(0xFF00C9A7).withOpacity(0.08),
            borderRadius: BorderRadius.circular(8.r),
          ),
          child: Row(
            children: [
              Icon(Icons.info_outline_rounded, size: 16.w, color: const Color(0xFF00C9A7)),
              SizedBox(width: 8.w),
              Expanded(
                child: Text(
                  '血压波动在正常范围内',
                  style: TextStyle(fontSize: 12.sp, color: const Color(0xFF00C9A7)),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Widget _buildVariabilityItem(String label, String range, String unit) {
  return Expanded(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: TextStyle(fontSize: 12.sp, color: Colors.grey[500])),
        SizedBox(height: 4.h),
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(range, style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: const Color(0xFF1A1A2E),
            )),
            Text(' $unit', style: TextStyle(fontSize: 11.sp, color: Colors.grey[400])),
          ],
        ),
      ],
    ),
  );
}

波动分析展示收缩压和舒张压的范围，让用户了解自己血压的稳定程度。波动过大可能提示需要关注。

测量时间分布

血压在一天中的不同时间会有变化，可以分析用户的测量时间分布：

Widget _buildMeasurementTimeAnalysis() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.r),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('测量时间', style: TextStyle(
          fontSize: 14.sp,
          fontWeight: FontWeight.w500,
          color: const Color(0xFF1A1A2E),
        )),
        SizedBox(height: 12.h),
        Row(
          children: [
            _buildTimeSlot('早晨', '85%', true),
            _buildTimeSlot('中午', '10%', false),
            _buildTimeSlot('晚上', '5%', false),
          ],
        ),
        SizedBox(height: 8.h),
        Text(
          '建议在每天相同时间测量，数据更有参考价值',
          style: TextStyle(fontSize: 11.sp, color: Colors.grey[400]),
        ),
      ],
    ),
  );
}

Widget _buildTimeSlot(String label, String percent, bool isPrimary) {
  return Expanded(
    child: Column(
      children: [
        Text(
          percent,
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.w600,
            color: isPrimary ? const Color(0xFF6C63FF) : Colors.grey[400],
          ),
        ),
        SizedBox(height: 4.h),
        Text(label, style: TextStyle(fontSize: 11.sp, color: Colors.grey[500])),
      ],
    ),
  );
}

这个组件展示用户在不同时间段测量血压的比例，并提醒用户保持测量时间的一致性。

长期趋势提示

如果有足够的历史数据，可以分析长期趋势：

Widget _buildLongTermTrend() {
  return Container(
    padding: EdgeInsets.all(12.w),
    decoration: BoxDecoration(
      color: const Color(0xFF4ECDC4).withOpacity(0.1),
      borderRadius: BorderRadius.circular(10.r),
    ),
    child: Row(
      children: [
        Icon(Icons.trending_down_rounded, size: 20.w, color: const Color(0xFF4ECDC4)),
        SizedBox(width: 10.w),
        Expanded(
          child: Text(
            '过去30天，您的平均血压下降了3mmHg，继续保持！',
            style: TextStyle(fontSize: 13.sp, color: const Color(0xFF4ECDC4)),
          ),
        ),
      ],
    ),
  );
}

长期趋势分析给用户提供更宏观的视角，让他们了解自己的血压管理效果。

小结

血压趋势页面通过平均血压展示和个性化建议，帮助用户了解自己的血压状况。

核心设计要点包括：平均血压居中突出显示，状态标签用颜色区分不同等级，健康建议根据状态动态生成。这些设计让用户能全面了解自己的血压健康，并获得有针对性的指导。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # python # harmonyos
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony: Flutter 三方库 fresh 自动处理 OAuth2 令牌刷新（无感登录续期）

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony：Flutter 三方库 forge2d 赋予鸿蒙应用真实的物理动态（基于 Box2D 的高性能物理引擎）

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony: Flutter 三方库 extension 全力释放 Dart 扩展方法的潜力（代码解耦与能力赋予）

avatar 开源鸿蒙跨平台开发者社区