企业官网建设流程全解析

下单、付款、发货、收货——这种多步骤流程在电商、审批、安装向导里到处都是。和普通进度条不一样，步骤进度条要把每一步的名称都标出来，还要用圆圈和连接线把先后关系画清楚。QML 里实现这个效果的关键是用Repeater生成节点，再用一个比较算式决定节点和连接线亮还是暗。

Demo 步骤进度条

水平步骤（5 步电商流程）和垂直步骤（4 步审批流程）同屏展示，底部两根滑杆分别控制各自的当前步骤。

涉及的核心知识点：

• Repeater 配合字符串数组生成节点
• 节点圆圈与连接线的亮灭判定
• 水平与垂直两种排布方式
• 已完成（✓）和当前步骤（数字）的文字切换
• 标签文字与节点的对齐处理

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

演示代码

FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margin