控制当前打开的步骤,是 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 .. 会回到上一步 ..