用户登录

控制当前打开的步骤,是 Stepper 里的 currentStep 属性 .. 把步骤的索引交给它 .. 比如让第二个步骤变成当前打开的步骤,可以把这个值设置成 1 ,因为第一个步骤的索引值是 0 ..

这个值我们可以使用 _currentStep 表示 .. 然后在上面再去添加这个 _currentStep ,类型是 int .. 名字叫 _currentStep .. 默认让它等于 0 ..

再去修改一下 Step 里的 isActive .. 这个 Step 可以判断一下 _currentStep 是不是等于 0 ,意思就是检查一下当前的步骤是不是就是这个 Step .. 如果是,就让这个步骤变成激活状态 .. 不是的话,它就会是未激活的状态 ..

同样处理一下另外两个 Step ...

这个检查的是 _currentStep 是不是等于 1 .. 最后这个 Step 检查的是 _currentStep 是不是等于 2 ..

现在你会发现,第一个步骤是激活状态,另外两个步骤都是未激活状态 ..

按下这个步骤序号,会执行 onStepTapped .. 我们先在 Stepper 里面添加一个 onStepTapped .. 有个 value 参数 .. 表示的就是当前被按的步骤的索引值 ..

里面用一下 setState .. 去把 _currentStep 的值设置成当前被按的步骤的索引值 ..

然后到模拟器上试一下 .. 现在按下哪个步骤,哪个步骤就会变成激活状态 ..

按钮

每个步骤里面默认都有一个继续按钮,还有一个取消按钮 .. 按一下继续按钮,会执行 onStepContinue .. 在 Stepper 里面,添加一个 onStepContinue ..

这里我们可以先简单的往下走一步 .. 里面用一个 setState .. 先判断一下 .. 看看 _currentStep 是不是小于 2 ,这个 2 是最后一步的索引值 .. 如果是的话 .. 我们就让 _currentStep 的值加上 1 .. 不然的话,就让 _currentStep 的值等于 0 ..

按下 Cancel 取消会执行 onStepCancel .. 添加一个 onStepCancel .. 在这个方法里面,同样可以用一下 setState .. 里面先判断一下 .. 检查 _currentStep 是不是大于 0 .. 如果是,就让 _currentStep 减掉 1 .. 不是的话,就让 _currentStep 的值等于 0 ..

下面再到模拟器上试一下 ..

按一下 Continue 按钮 .. 会跳到下一步 ... 按下 Cancel .. 会回到上一步 ..

Stepper:步骤的行为《 Flutter 移动应用:MDC 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点