目录Demo 心形进度条演示代码关键逻辑解析运行验证扩展复用方向工程下载心形进度条把进度做成「给爱心上色」——心形轮廓是固定的，进度决定填充高度或宽度。这种形式在健康数据、爱心积分进度这类场景里很合适，比普通线性进度条更有情感色彩。QML 用 Canvas 的bezierCurveTo画心形路径做裁剪，再用fillRect做底色和进度填充，填充方向可以是垂直（自底向上）或水平（自左向右）。Demo 心形进度条两种心形进度条同屏排开：垂直心形（自底向上填充 + 红色渐变）、水平心形（自左向右填充 + 粉色渐变），底部一根滑杆统一控制进度。涉及的核心知识点：贝塞尔曲线画心形路径心形裁剪填充垂直填充和水平填充两种方向渐变填充让进度有层次文字偏移避免被心形遮挡以下演示代码来自qml_progress/Demo_HeartBar.qml，为便于阅读，只展示了关键代码。演示代码FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 2
