Flutter Stepper - 显示所有内容

Question

我需要一个步进器来显示某事物的当前状态（以步骤为单位）。因此我想一次显示所有状态的内容。我去掉了默认的继续和取消按钮，但它只显示第一步的内容。

这是我的代码：

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. 重命名new中的2个类名modified_stepper.dart，这样使用时就不会引起冲突。有 2 个类需要重命名：Stepper和Step。例如，将它们重命名为ModifiedStepper和ModifiedStep。

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

3. 在这个新的 ModifiedStepper 类中，找到该方法_isCurrent，它将如下所示：

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

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

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

现在您可以导入ModifiedStepper使用。