前言

Flutter是Google开发的开源UI工具包，支持用一套代码构建iOS、Android、Web、Windows、macOS和Linux六大平台应用，实现"一次编写，多处运行"。

OpenHarmony是由开放原子开源基金会运营的分布式操作系统，为全场景智能设备提供统一底座，具有多设备支持、模块化设计、分布式能力和开源开放等特性。

Flutter for OpenHarmony技术方案使开发者能够：

1. 复用Flutter现有代码（Skia渲染引擎、热重载、丰富组件库）
2. 快速构建符合OpenHarmony规范的UI
3. 降低多端开发成本
4. 利用Dart生态插件资源加速生态建设

先看效果

在鸿蒙真机 上模拟器上成功运行后的效果

本文说明当前 Flutter 项目的整体结构、入口与组件划分，以及「心率仪表盘」功能的实现要点。项目采用按功能与层级划分的目录（app、features、widgets、utils），使用玻璃拟态卡片、霓虹背景与实时折线图等组件，实现流畅的实时数据展示与控制。

---

📋 目录

项目结构说明

• 文件目录结构
• 入口与核心文件
• 组件依赖关系

当前功能概览

• 心率仪表盘 (Heart Rate Demo)
• 数据与控制器
• 通用组件

开发与使用说明

• 运行方式
• 扩展与注意事项

---

项目结构说明

文件目录结构

lib/
├── main.dart                    # 应用入口（runApp）
├── app/                         # 应用级配置
│   ├── app.dart                 # MaterialApp 与首页
│   └── theme/
│       └── app_theme.dart       # 主题（深色、配色等）
├── features/                    # 按功能划分的模块
│   └── heart_rate_demo/
│       ├── heart_rate_demo_page.dart   # 心率仪表盘页面
│       └── heart_rate_controller.dart  # 心率模拟与状态控制
├── utils/                       # 工具与数据层
│   └── time_series_buffer.dart  # 时序环形缓冲区（图表数据）
└── widgets/                     # 可复用 UI 组件
    ├── charts/
    │   └── realtime_line_chart.dart    # 实时折线图
    ├── glass/
    │   └── glass_card.dart              # 玻璃拟态卡片、玻璃按钮
    └── neon/
        └── neon_background.dart         # 霓虹动画背景

入口与核心文件

文件	作用
lib/main.dart	应用入口，main() 中调用 runApp()，
lib/app/app.dart	定义 DemoApp：MaterialApp、主题、首页为 HeartRateDemoPage。
lib/app/theme/app_theme.dart	深色主题：种子色、背景色、Slider/Chip/文字等统一样式。
lib/features/heart_rate_demo/heart_rate_demo_page.dart	心率仪表盘整页：顶栏、主图卡片、快捷统计行、控制卡片等。
lib/features/heart_rate_demo/heart_rate_controller.dart	心率模拟逻辑：定时器、三种模式（Calm/Workout/Interval）、BPM 合成、ValueNotifier 状态。
lib/utils/time_series_buffer.dart	固定容量环形缓冲区，O(1) 追加与移动平均，供图表消费。
lib/widgets/charts/realtime_line_chart.dart	基于 CustomPainter 的实时折线图，支持发光效果。
lib/widgets/glass/glass_card.dart	毛玻璃卡片 GlassCard、玻璃图标按钮 GlassIconButton。
lib/widgets/neon/neon_background.dart	霓虹风格全屏背景动画。

组件依赖关系

main.dart
  └── 可挂载 App() 或 DemoApp()

app/app.dart
  ├── app/theme/app_theme.dart
  └── features/heart_rate_demo/heart_rate_demo_page.dart

heart_rate_demo_page.dart
  ├── heart_rate_controller.dart
  ├── widgets/charts/realtime_line_chart.dart
  ├── widgets/glass/glass_card.dart
  └── widgets/neon/neon_background.dart

heart_rate_controller.dart
  └── utils/time_series_buffer.dart

realtime_line_chart.dart
  └── utils/time_series_buffer.dart

---

当前功能概览

心率仪表盘 (Heart Rate Demo)

• 顶部栏：标题 “Vitals Dashboard”，播放/暂停、重置按钮（玻璃按钮）。
• 主图区域：大卡片内嵌实时心率折线图，当前 BPM 药丸、Avg/Min/Max 与倍速显示。
• 模式与发光：ChoiceChip 切换 Calm / Workout / Interval；FilterChip 开关 Glow。
• 快捷统计行：三张玻璃小卡——Signal（信号条）、Rhythm（当前模式）、Quality（质量条）。
• 控制卡片：Stream Speed 滑块（0.5x～2.0x），Kick/Auto、Run/Hold 等快捷操作。

核心页面结构示例（节选）：

// heart_rate_demo_page.dart - 页面骨架
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        const Positioned.fill(child: NeonBackground()),           // 底层霓虹背景
        Positioned.fill(child: /* 半透明渐变遮罩 */),
        SafeArea(
          child: Column(
            children: [
              _TopBar(controller: _controller),                   // 标题 + 播放/暂停/重置
              Expanded(
                child: Column(
                  children: [
                    _HeroChartCard(controller: _controller, pulse: _pulse),  // 主图卡片
                    _QuickStatsRow(controller: _controller),                 // 三列小卡
                    Expanded(child: _ControlsCard(controller: _controller)), // 控制区
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

数据与控制器

• HeartRateController：

  • 使用 Timer.periodic 驱动，按当前 speed 与 mode 合成 BPM。
  • 通过 ValueNotifier 暴露：running、mode、speed、glow、stats、buffer。
  • buffer 为 TimeSeriesBuffer，图表与统计（avg/min/max）均依赖该缓冲区。

• TimeSeriesBuffer：

  • 固定容量环形缓冲区，push(value) 追加，自动维护 sum/min/max，实现 O(1) 均值和区间。
  • 继承 ChangeNotifier，push 后 notifyListeners()，供 CustomPainter 的 repaint 使用。

// heart_rate_controller.dart - 状态与缓冲
final ValueNotifier<bool> running;
final ValueNotifier<SimulationMode> mode;
final ValueNotifier<double> speed;   // 0.5 ~ 2.0
final ValueNotifier<bool> glow;
final ValueNotifier<HeartRateStats> stats;
final TimeSeriesBuffer buffer;

void _onTick() {
  _t += (baseTick.inMilliseconds / 1000.0) * speed.value;
  final target = _targetEnergy(mode.value, _t);
  _energy += (target - _energy) * 0.06;
  final bpm = _synthBpm(_t, _energy);
  buffer.push(bpm.toDouble());       // 写入环形缓冲
  stats.value = HeartRateStats(...); // 更新当前/avg/min/max
}

通用组件

• GlassCard：BackdropFilter 模糊 + 半透明描边与阴影，用于所有卡片区域。
• GlassIconButton：小尺寸玻璃风格图标按钮，用于顶栏播放/暂停/重置。
• NeonBackground：全屏 CustomPaint，渐变 + 霓虹光晕动画。
• RealtimeLineChart：CustomPaint 折线图，监听 buffer 与 pulse，支持发光描边。

---

开发与使用说明

运行方式

• 若入口为 心率仪表盘：在 main.dart 中改为：

  import 'app/app.dart';
  void main() => runApp(const DemoApp());
  

  然后执行：

  flutter run
  

扩展与注意事项

• 新增功能模块：建议在 features/ 下新建子目录（如 features/xxx/xxx_page.dart + 对应 controller），在 app.dart 中挂路由或首页。
• 图表与性能：TimeSeriesBuffer 容量固定，避免无限扩容；图表通过 Listenable.merge([buffer, pulse]) 做 repaint，仅数据或动画变化时重绘。
• 主题：统一在 app_theme.dart 中修改颜色与组件主题，保证玻璃卡片、按钮、文字风格一致。
• 若项目内含 HarmonyOS (ohos)：Flutter 侧仅负责 UI 与业务逻辑，鸿蒙侧通过 FlutterAbility / FlutterPage 嵌入；构建与运行需参考 ohos 目录下的配置与文档。

---

总结

当前项目采用 app / features / widgets / utils 分层结构，入口在 main.dart，应用壳与主题在 app/，核心演示功能为 心率仪表盘，依赖 HeartRateController + TimeSeriesBuffer 提供实时数据，GlassCard、NeonBackground、RealtimeLineChart 等组件负责展示与动效。按上述结构扩展新功能、替换首页或接入鸿蒙时，可优先改 app.dart 与对应 feature，保持入口与组件结构清晰。

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