目录Demo 图标进度条演示代码（星级图标）关键逻辑解析（星级图标）演示代码（表情图标）关键逻辑解析（表情图标）演示代码（火箭进度）关键逻辑解析（火箭进度）运行验证扩展复用方向工程下载图标进度条把进度做成图标变化——5 颗星按进度逐个填充、表情根据进度切换笑脸、火箭沿轨道飞行并喷射火焰。这种形式在评分、情绪反馈、任务进度这类场景里更有趣味性，比普通线性进度条生动得多。Demo 图标进度条三种图标进度条同屏排开：星级图标（5 颗星按进度填充）、表情图标（脸色 + 眼睛 + 嘴巴 + 腮红）、火箭进度（火箭沿轨道飞行 + 火焰闪烁），底部一根滑杆统一控制进度。QML 用 Canvas 画图标，配合进度计算决定图标状态，火箭还用NumberAnimation驱动火焰持续闪烁。涉及的核心知识点：星级按进度逐个填充表情眼睛和嘴巴按进度阈值切换火箭沿轨道飞行火焰用正弦函数做长度波动多层路径绘制组合成完整图标以下演示代码来自qml_progress/Demo_IconBar.qml，为便于阅读，只展示了关键代码。演示代码（星级图标）先看最基础的星级填充结构：FadeInAnimation { ColumnLayout { anchors.fill: pare