Question

我正在使用Stepper小部件制作“更改密码表格”。一切都很好，但我不知道如何禁用以前的步进单击。

示例：

第1步输入旧的PinCode。
第2步输入新的密码。

如果我在第2步中单击“步进器”，则我不想返回到第1步。

我该如何解决？

这是我的源代码：

Form(
        key: _formKey,
        child: Stepper(
          steps: steps(),
          currentStep: currStep,
          onStepContinue: () {
            setState(() {
              if (formKeys[currStep].currentState.validate()) {
                if (currStep < steps().length - 1) {
                  currStep += 1;
                } else if (steps().length == 2) {
                  print('Done');
                } else {
                  currStep = 0;
                }
              }
            });
          },
          onStepTapped: (step) {
            setState(() {
              currStep = step;
              print(step);
            });
          },
        ),
      ),
 List<Step> steps() {
    return [
      Step(
        title: const Text('Enter Previous PinCode'),
        isActive: currStep == 0 ? true : false,
        state: StepState.indexed,
        content: Form(
          key: formKeys[0],
          child: TextFormField(
            autofocus: true,
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value.isEmpty || value != userModelHive.pinCodeNumber) {
                return 'PinCode Invalid';
              }
              return null;
            },
          ),
        ),
      ),
      Step(
        title: const Text('Enter New PinCode'),
        isActive: true,
        state: StepState.indexed,
        content: Form(
          key: formKeys[1],
          child: TextFormField(
            autofocus: true,
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value.isEmpty) {
                return 'Provided PinCode';
              } else if (value.length < 4 || value.length > 6) {
                return "More than 4 Less than 6";
              }
              return null;
            },
          ),
        ),
      ),
    ];
  }

Answer 1

只需检查step中的onStepTapped变量是否为上一个变量即可。如果是上一步，则不要调用setState

Stepper(
    steps:steps(),
    currentStep:currentStep,
    onStepTapped:(step){
      if(step>currentStep){
        setState((){
            currentStep=step;
        });
      }
    }
)

Answer 2

我不知道Stepper小部件支持的任何方法。我建议的方法将是这样的：

//List of already visited steps indexes
List<int> alreadyVisitedStepsIndexes = [];

// Your form
Stepper(
  steps: steps,
  currentStep: currStep,
  onStepTapped: (step) {
   // I'm not sure if step is already the index of it
   // if that's the case this code can be simplified

   var indexOfSelectedStep = steps.indexOf(step);
   if(!alreadyVisitedStepsIndexes.contains(indexOfSelectedStep)){
     alreadyVisitedStepsIndexes.add(indexOfSelectedStep);
     setState(() {
       currStep = step;
     });
   }
  },
)

Flutter：禁用上一步步进器

这是我的源代码：

2 个答案: