目录Demo 电池进度条演示代码关键逻辑解析运行验证扩展复用方向工程下载电池进度条在电量、储能、充电进度这类场景里用得很多——一个电池外形成长条，内部填充高度反映电量，颜色还跟着电量变化：满电绿、中等黄、低电红。QML 的 Canvas 没有原生的圆角矩形路径方法（ctx.roundedRect在标准 Canvas 里存在但 QML Canvas 不支持），需要自己用arcTo拼出圆角路径。电池头、外壳、内部填充都用这个路径函数画出来。Demo 电池进度条两种电池进度条同屏排开：基础电池（水平横向、电量文字在内）、垂直电池（竖直纵向、光泽渐变），底部一根滑杆统一控制进度。涉及的核心知识点：用 arcTo 拼圆角矩形路径电池头 + 外壳 + 内部填充三层结构填充宽度按进度计算电量阈值切换颜色垂直电池的填充方向反转光泽渐变叠加立体感以下演示代码来自qml_progress/Demo_BatteryBar.qml，为便于阅读，只展示了关键代码。演示代码FadeInAnimation { ColumnLayout {