目录Demo 步骤进度条演示代码关键逻辑解析运行验证扩展复用方向工程下载下单、付款、发货、收货——这种多步骤流程在电商、审批、安装向导里到处都是。和普通进度条不一样，步骤进度条要把每一步的名称都标出来，还要用圆圈和连接线把先后关系画清楚。QML 里实现这个效果的关键是用Repeater生成节点，再用一个比较算式决定节点和连接线亮还是暗。Demo 步骤进度条水平步骤（5 步电商流程）和垂直步骤（4 步审批流程）同屏展示，底部两根滑杆分别控制各自的当前步骤。涉及的核心知识点：Repeater 配合字符串数组生成节点节点圆圈与连接线的亮灭判定水平与垂直两种排布方式已完成（✓）和当前步骤（数字）的文字切换标签文字与节点的对齐处理以下演示代码来自qml_progress/Demo_StepBar.qml，为便于阅读，只展示了关键代码。演示代码FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margin