企业官网建设流程全解析

心形进度条把进度做成「给爱心上色」——心形轮廓是固定的，进度决定填充高度或宽度。这种形式在健康数据、爱心积分进度这类场景里很合适，比普通线性进度条更有情感色彩。QML 用 Canvas 的bezierCurveTo画心形路径做裁剪，再用fillRect做底色和进度填充，填充方向可以是垂直（自底向上）或水平（自左向右）。

Demo 心形进度条

两种心形进度条同屏排开：垂直心形（自底向上填充 + 红色渐变）、水平心形（自左向右填充 + 粉色渐变），底部一根滑杆统一控制进度。

涉及的核心知识点：

• 贝塞尔曲线画心形路径
• 心形裁剪填充
• 垂直填充和水平填充两种方向
• 渐变填充让进度有层次
• 文字偏移避免被心形遮挡

以下演示代码来自qml_progress/Demo_HeartBar.qml，为便于阅读，只展示了关键代码。

演示代码

FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 2