Flutter for OpenHarmony健康App统计页面开发实践

1. 项目概述

在健康管理类App中，统计概览页面是用户获取健康数据洞察的第一入口。这个基于Flutter for OpenHarmony开发的健康记录App，通过精心设计的统计概览页面，将复杂的健康数据转化为直观的可视化呈现。页面核心包含四大模块：健康评分环形图、时间周期选择器、体重变化趋势图和分类统计卡片组。

提示：在OpenHarmony生态中使用Flutter开发时，需要特别注意平台特有的适配问题，比如单位转换和导航方式。

2. 技术架构解析

2.1 状态管理方案

采用经典的StatefulWidget管理页面状态，这是Flutter中最直接的状态管理方式：

dart复制class _StatisticsOverviewPageState extends State<StatisticsOverviewPage> {
  int _selectedPeriod = 0;
  final List<String> _periods = ['周', '月', '年'];
  
  @override
  Widget build(BuildContext context) {
    // 页面构建逻辑
  }
}

这种方案适合相对简单的页面状态管理，当状态复杂度增加时，可以考虑升级到Provider或Riverpod等状态管理方案。

2.2 响应式设计实现

页面使用了全面的响应式单位：

• w：基于屏幕宽度的比例单位
• h：基于屏幕高度的比例单位
• r：基于屏幕尺寸的圆角单位
• sp：可缩放像素（考虑系统字体大小设置）

dart复制padding: EdgeInsets.all(20.w),
decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(20.r),
),

这种设计确保了在不同尺寸的OpenHarmony设备上都能保持一致的视觉效果。

3. 核心组件实现细节

3.1 健康评分卡片

健康评分卡片采用环形进度条+文字叠加的设计：

dart复制Widget _buildScoreCard() {
  return Container(
    margin: EdgeInsets.all(20.w),
    padding: EdgeInsets.all(20.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(20.r),
    ),
    child: Row(
      children: [
        SizedBox(
          width: 80.w,
          height: 80.w,
          child: Stack(
            children: [
              CircularProgressIndicator(
                value: 0.85,
                strokeWidth: 8.w,
                backgroundColor: Colors.grey[200],
                valueColor: const AlwaysStoppedAnimation(Color(0xFF6C63FF)),
                strokeCap: StrokeCap.round,
              ),
              Center(child: Text('85', style: TextStyle(
                fontSize: 26.sp, 
                fontWeight: FontWeight.w700
              ))),
            ],
          ),
        ),
        // 评分说明部分
      ],
    ),
  );
}

关键实现技巧：

1. 使用Stack实现文字和进度条的叠加
2. strokeCap: StrokeCap.round让进度条端点圆润
3. 通过valueColor控制进度条颜色动画

3.2 时间周期选择器

胶囊式时间选择器通过动态样式变化提供清晰的交互反馈：

dart复制Widget _buildPeriodSelector() {
  return Padding(
    padding: EdgeInsets.symmetric(horizontal: 20.w),
    child: Row(
      children: List.generate(_periods.length, (index)