【Flutter 专题】69 图解基本 Stepper 步进器
小菜尝试做一个积分进度和类似物流进度的小组件,优先考虑的是自定义 ListView 但还是查阅了一下资料,发现神奇的 Stepper 步进器,虽不能完全满足需求,但提供了很好的思路,小菜仅就基本的 Stepper 学习一下;
源码分析
分析源码可知,Stepper 中存放的是 Step 列表,且 Step 数量不可变,其中包括了点击的回调等;Step 只是一个类而非 Widget 故不能单独使用;
案例尝试
Step
title 为描述性标题;content 为标题与副标题之下的内容,默认包含 continue 和 cancel 按钮;两者均为 Widget 且不可为 null;
subtitle 为副标题,在 title 之下,默认小一个字号;
state 为状态,Flutter 默认提供了多种状态样式;a. indexed: 在圆中展示每个 Step 数组下标(从 1 开始);b. editing: 编辑状态,在圆中展示铅笔图标;c. complete: 完成状态,在圆中展示刻度图标;d. disabled: 不可用状态,为灰色;e. error: 错误状态,在红色三角中展示叹号图标;
isActive 为设置当前 Step 是否高亮,仅图标高亮,其中 error 状态默认高亮,disabled 状态图标也可高亮;
Stepper
type 包括横向 horizontal 展示与纵向 vertical 展示两类,默认是 vertical;
currentStep 为当前 Step,注意数组下标从 0 开始;
onStepTapped 为 Step 点击回调,小菜尝试点击切换 Step 时获取当前 Step 高亮;
onStepContinue 为 Step 中继续按钮点击回调;**** 为 Step 中取消按钮点击回调;小菜尝试对继续和取消点击进行 Step 切换;
controlsBuilder 用来自定义继续和取消按钮,若不需要展示则设置空 Widget 即可;
physics 为滑动属性,小菜测试将 Stepper 放在 ListView 中且不能完全展示时,设置 ClampingScrollPhysics() 可连续滑动;
Stepper 使用方便快捷,虽样式相对固定无法满足所有需求,但给我们提供了很好的自定义思路;小菜对 Stepper 研究尚浅,如有错误请多多指导!
来源: 阿策小和尚
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/ac0e93b4464531f269d2d825b】。文章转载请联系作者。
评论