如何在继续时修改 Step StepState

Question

我正在学习本教程https://www.youtube.com/watch?v=izbkS2svuq4

并且有一个简短的提及将 StepState 修改为 StepState.editing 所以你会得到一个铅笔图标。

如何修改我正在进行的步骤的 StepState，以便在我执行 on/past 时将状态更改为编辑（或完成）

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;
          });
        },
      ),
    );
  }
}

Answer 1

将步骤列表声明移至 build method 并将每个步骤的 state 字段声明为例如第一步：_stepCounter == 0 ? StepState.editing : StepState.indexed 并删除此行 steps[step].state = StepState.editing; 因为.state 是最终的，因此无法更改。

Answer 2

移动步骤时具有 3 个状态的完整示例：

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;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如何在继续时修改 Step StepState

How to modify a Step StepState on continue

flutter

stepper