Stepper
显示多步流程的进度。
steps := kit.Stepper("填写订单", "确认付款", "发货").Navigable()
steps.SetValue(1) // 到第二步
- 当前步之前的为已完成(显示对勾),当前步加粗,之后的为未开始。
Navigable()允许点击已完成的步骤回到那一步,这时调用OnChange。Value()返回当前步的序号,等于步骤数时表示全部完成;SetValue不触发回调。
Agent:容器角色 list,每一步是 step,value 为 done / current / upcoming。
验证:go run ./examples/components -section stepper,加 -theme dark 检查深色。
步骤多于可见宽度时提供横向滚动,保留步骤顺序和连接线。可导航的已完成步骤支持键盘聚焦;SetDisabled 禁止滚动和步骤修改。构造时复制标签切片。末项滚动后点击、禁用与 1× / 2× 有回归测试。
Vertical() 改为竖向排列与竖向滚动,连接线沿标记圆心排列。Size(dp) 设置标记直径,常用 20、24(默认)、32dp;图标与连接线长度跟随缩放,文字使用主题字号档。零、负数、NaN、无穷值不改变当前尺寸。
需要图标、单项禁用或多行说明时使用 SetEntries:
steps := kit.Stepper().Vertical().Size(32).Navigable()
steps.SetEntries(
kit.StepperItem{Label: "订单", Icon: kit.IconReceipt},
kit.StepperItem{Label: "付款", Icon: kit.IconLock, Disabled: true},
kit.StepperItem{Label: "发货", Icon: kit.IconInbox},
)
steps.SetValue(2)
StepperItem.Icon替换数字/完成对勾;未提供图标时保留原有标记。StepperItem.Disabled或SetItemDisabled(index, on)禁止该步点击和键盘聚焦,不改变其完成状态,不阻止SetValue程序跳转。越界索引忽略。StepperItem.Content可提供多行说明等展示内容;Label仍是 Agent 名称。内容不应嵌套按钮或输入框。SetEntries和Entries()都复制条目切片,内容 View 不深拷贝。替换条目时保留当前索引并按新长度收敛,不触发OnChange。- 自定义条目仍遵守
Navigable():只允许回到已完成步骤;单项、整个组件与祖先禁用均阻止导航。