首页 > 解决方案 > Flutter:Stepper onStepContinue不触发

问题描述

你能告诉我我的代码有什么问题吗?

Widget _createProfileStepper() {
int currentStep = 0;

List<Step> createAccSteps = [
  new Step(
    title: Container(),
    content: new Text('This is the first step.'),
    isActive: currentStep >= 0,
    state: currentStep >= 0 ? StepState.editing : StepState.disabled,
  ),
  new Step(
    title: Container(),
    content: new Text('This is the second step.'),
    isActive: currentStep >= 0,
    state: currentStep >= 1 ? StepState.editing : StepState.disabled,
  ),
  new Step(
    title: Container(),
    content: new Text('This is the third step.'),
    isActive: currentStep >= 0,
    state: currentStep >= 2 ? StepState.editing : StepState.disabled,
  ),
  new Step(
    title: Container(),
    content: new Text('This is the second step.'),
    isActive: currentStep >= 0,
    state: currentStep >= 3 ? StepState.editing : StepState.disabled,
  ),
  new Step(
    title: Container(),
    content: new Text('This is the third step.'),
    isActive: currentStep >= 0,
    state: currentStep >= 4 ? StepState.editing : StepState.disabled,
  ),
];

return Scaffold(
  appBar: AppBar(
    title: Text("Create Profile"),
  ),
  body: Stepper(
    type: StepperType.horizontal,
    currentStep: currentStep,
    onStepTapped: (step) {
      setState(() {
        currentStep = step;
      });
    },
    onStepContinue: () {
      setState(() {
        if (currentStep < createAccSteps.length - 1) {
          currentStep = currentStep + 1;
        } else {}
      });
    },
    onStepCancel: () {
      setState(() {
        if(currentStep > 0){
          currentStep = currentStep - 1;
        }
        else {
          currentStep = 0;
        }
      });
    },
    steps: createAccSteps,
  ),
);
}

我遵循了 Flutter 步进器的所有示例,但仍然没有运气。我可以点击继续按钮,但它没有移动到另一个步骤。我是不是忘记了什么?我创建了一个有状态的 Widget 类,然后一个按钮会带我调用这个 _createProfileStepper()。谢谢。

标签: dartflutterstepper

解决方案


因此您无法从内部列表中访问您的 currentStep 以进行启动。

“isActive”也应该是一个布尔值(并且只影响样式https://docs.flutter.io/flutter/material/Step/isActive.html

此外,将空的 Container() 作为标题似乎有点奇怪,您可以将其删除或将步骤号放在那里

尝试将您的步骤更改为

Step(
    title: Text("Step One"),
    content: new Text("This is the first step."),
    isActive: true
),

推荐阅读