dart - Flutter Stepper - 显示所有内容

Question

我需要一个 Stepper 来显示某物的当前状态(按步骤)。因此我想一次显示所有状态的内容。我删除了默认的 Continue 和 Cancel 按钮，但它只显示第一步的内容。

这是我的代码:

body: Center(
        child: new Stepper(
          steps: my_steps,
          controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                Container(
                  child: null,
                ),
                Container(
                  child: null,
                ),
              ],
            );
          },
        ),
      ),

这些是我的步骤:

List<Step> my_steps = [
    new Step(
        title: new Text("Step 1"),
        content: new Text("Hello 1!")),
    new Step(
        title: new Text("Step 2"),
        content: new Text("Hello 2!")
    ),
    new Step(
        title: new Text("Step 3"),
        content: new Text("Hello World!"),
    )
  ];

这里它只显示第一步的“Hello 1”。其余内容为空。

有人吗？

Answer 1

我做到了:

1. 将 MaterialUI 的 Stepper 类从目录 flutter/lib/src/material/stepper.dart 克隆到项目中的另一个目录。例如，您复制它并重命名为您的 /lib/widget/modified_stepper.dart。

2. 重命名新的 modified_stepper.dart 中的 2 个类名，这样您使用它时就不会引起冲突。有 2 个类需要重命名:Stepper 和 Step。例如，将它们重命名为 ModifiedStepper 和 ModifiedStep。

(提示:如果您使用的是 Visual Studio Code，您可以使用多个光标更快地执行重命名，方法是将光标移动到类名，然后按 Ctrl + F2 (Windows) 或 Cmd + F2 (Mac))

1. 在这个新的 ModifiedStepper 类中，找到方法 _isCurrent，它看起来像这样:

bool _isCurrent(int index) {
  return widget.currentStep == index;
}

此方法用于检测当前显示的是哪个步骤:如果currentStep 等于该步骤的index，则显示该步骤。所以简单地做一个技巧:return true 总是会按照你预期的方式工作:

bool _isCurrent(int index) {
  return true;
  // return widget.currentStep == index;
}

现在你可以导入你的 ModifiedStepper 来使用了。