How to modify a Step StepState on continue

问题:

I was following this tutorial https://www.youtube.com/watch?v=izbkS2svuq4

and there was a brief mention of modifying the StepState to StepState.editing so you get a pencil icon.

How can I modify the StepState of the step I am on so that it changes the state to editing (or complete) when I step on/past it

class _SimpleWidgetState extends State<SimpleWidget> {
  int _stepCounter = 0;

  List<Step> steps = [
    Step(
      title: Text("Step One"),
      content: Text("This is the first step"),
      isActive: true
    ),
    Step(
      title: Text("Step Two"),
      content: Text("This is the second step"),
      isActive: true,
    ),
    Step(
      title: Text("Step Three"),
      content: Text("This is the third step"),
      isActive: true,
    ),
    Step(
      title: Text("Step Four"),
      content: Text("This is the fourth step"),
      isActive: true,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stepper(
        steps: steps,
        currentStep: this._stepCounter,
        type: StepperType.vertical,
        onStepTapped: (step) {
          setState(() {
            _stepCounter = step;
            steps[step].state = StepState.editing; // this does not work but is what Im trying to accomplish
          });
        },
        onStepCancel: () {
          setState(() {
            _stepCounter > 0 ? _stepCounter -= 1 : _stepCounter = 0;
          });
        },
        onStepContinue: () {
          setState(() {
            _stepCounter < steps.length - 1 ? _stepCounter += 1 : _stepCounter = 0;
          });
        },
      ),
    );
  }
}

回答1:

Move the Step list declaration into the build method and declare the state field of each step as for instance first step: _stepCounter == 0 ? StepState.editing : StepState.indexed and remove this line steps[step].state = StepState.editing; because .state is final and therefore can't be changed.

回答2:

Complete example with 3 states while moving steps:

class _State extends State<MyApp> {

  int _current;

  List<StepState> _listState;

  @override
  void initState() {
    _current = 0;
    _listState = [
      StepState.indexed,
      StepState.editing,
      StepState.complete,
    ];
    super.initState();
  }

  List<Step> _createSteps(BuildContext context) {
    List<Step> _steps = <Step>[
      new Step(
        state: _current == 0
            ? _listState[1]
            : _current > 0 ? _listState[2] : _listState[0],
        title: new Text('Step 1'),
        content: new Text('Do Something'),
        isActive: true,
      ),
      new Step(
        state: _current == 1
            ? _listState[1]
            : _current > 1 ? _listState[2] : _listState[0],
        title: new Text('Step 2'),
        content: new Text('Do Something'),
        isActive: true,
      ),
      new Step(
        state: _current == 2
            ? _listState[1]
            : _current > 2 ? _listState[2] : _listState[0],
        title: new Text('Step 3'),
        content: new Text('Do Something'),
        isActive: true,
      ),
    ];
    return _steps;
  }

  @override
  Widget build(BuildContext context) {
    List<Step> _stepList = _createSteps(context);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Stepper Example'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Center(
          child: new Column(
            children: <Widget>[
              Expanded(
                child: Stepper(
                  type: StepperType.vertical,
                  steps: _stepList,
                  currentStep: _current,
                  onStepContinue: () {
                    setState(() {
                      if (_current < _stepList.length - 1) {
                        _current++;
                      } else {
                        _current = _stepList.length - 1;
                      }
                      //_setStep(context);
                    });
                  },
                  onStepCancel: () {
                    setState(() {
                      if (_current > 0) {
                        _current--;
                      } else {
                        _current = 0;
                      }
                      //_setStep(context);
                    });
                  },
                  onStepTapped: (int i) {
                    setState(() {
                      _current = i;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}