如何从颤振中的步进器中删除继续按钮？

Question

我想创建一个交付状态流程来检查用户产品详细信息。 当我编写步进器来显示此流程时，页面上还有继续和取消按钮，但我想删除这些东西。

请帮助我，我是颤振新手。

Answer 1

我在步进器中遇到同样的问题，我需要从颤振中的步进器小部件中删除继续和取消按钮

我就是这样做的

Stepper(
 controlsBuilder: (context, controller) {
                  return const SizedBox.shrink();
                },
),

这样您就可以删除继续和取消按钮占用的空间

也许你会喜欢整个代码

注意：这里我使用水平步进器，所以我被包裹到 SizeBox 中并给出固定高度以消除无界误差。

class MyCustomSteep extends StatefulWidget {
  const MyCustomSteep({Key? key}) : super(key: key);

  @override
  State<MyCustomSteep> createState() => _MyCustomSteepState();
}

class _MyCustomSteepState extends State<MyCustomSteep> {
  int currentStep = 0;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 110,
      child: Stepper(
        controlsBuilder: (context, controller) {
          return const SizedBox.shrink();
        },
        type: StepperType.horizontal,
        currentStep: currentStep,
        onStepTapped: (stepIndex) {
          setState(() => currentStep = stepIndex);
          log('currentStep : $currentStep');
        },
        elevation: 1.0,
        steps: <Step>[
          Step(
            isActive: currentStep >= 0,
            title: const Text(
              'Created',
            ),
            content: const SizedBox.shrink(),
            label: SizedBox(
              height: 80,
              child: Text(
                DateFormat('dd MMM hh:mm:ss').format(DateTime.now()),
              ),
            ),
          ),
          Step(
            isActive: currentStep >= 1,
            title: const Text(
              'In Progress',
            ),
            content: const SizedBox.shrink(),
            label: Column(
              children: [
                Text(
                  DateFormat('dd MMM hh:mm:ss').format(DateTime.now()),
                ),
              ],
            ),
          ),
          Step(
            isActive: currentStep >= 2,
            title: const Text(
              'Vehicle Ready',
            ),
            content: const SizedBox.shrink(),
            label: Text(
              DateFormat('dd MMM hh:mm:ss').format(DateTime.now()),
            ),
          ),
          Step(
            isActive: currentStep >= 3,
            title: const Text(
              'Payment Due',
            ),
            content: const SizedBox.shrink(),
            label: Text(
              DateFormat('dd MMM hh:mm:ss').format(DateTime.now()),
            ),
          ),
          Step(
            isActive: currentStep >= 4,
            title: const Text(
              'Payment Done',
            ),
            content: const SizedBox.shrink(),
            label: Text(
              DateFormat('dd MMM hh:mm:ss').format(DateTime.now()),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

Stepper 小部件有一个 controlsBuilder 参数，这正是您所需要的。

Stepper(
      controlsBuilder: (context, {onStepContinue, onStepCancel}) {
        return SizedBox();
      },
      ...
    )

如果您检查 Stepper 类源文件中的注释，您可以找到更多如何控制它的示例：

Stepper(
        controlsBuilder: (context, {onStepContinue, onStepCancel}) {
          return Row(
            children: <Widget>[
              TextButton(
                onPressed: onStepContinue,
                child: const Text('NEXT'),
              ),
              TextButton(
                onPressed: onStepCancel,
                child: const Text('CANCEL'),
              ),
            ],
          );
        },
        ...
    )

Answer 3

在上述答案中，垂直轴上的步进器将导致步进器线收缩到中心。 所以要避免这种情况。你应该使用 Row。

此外，如果您想避免此更改造成的空间，请使用 边距：EdgeInsets.zero，

margin: EdgeInsets.zero,
controlsBuilder: (context, controller) => Row(children: []);

Answer 4

返回行( mainAxisAlignment：MainAxisAlignment.spaceEvenly， 孩子们： [ 升高的按钮( onPressed：controls.onStepContinue，

                child: Text(isLastStep ? 'Submit' : 'Next'),
              ),
              if (_currentStep != 0)

                ElevatedButton(
                  onPressed: controls.onStepCancel,
                  child: const Text('Back'),
                ),
            ],
          );

Answer 5

Stepper 小部件有一个可以使用的controlsBuilder 参数。

 controlsBuilder: (context, {onStepContinue, onStepCancel}) {
                return Row(
                  children: <Widget>[
                    Container(),
                    Container(),
                  ],
                );
              }

Answer 6

flutter版本> 2.8.1的解决方案

在 flutter 版本 > 2.8.1 中你不能使用这个：

 controlsBuilder: (context, {onStepContinue, onStepCancel}) {...}

使用这个：

 controlsBuilder: (context, _) {...}

或者这个：

 controlsBuilder: (context, onStepContinue) {...}


 controlsBuilder: (context, onStepCancel) {...}

这是一个完整的例子：

Stepper(
  controlsBuilder: (context, _) {
    return Row(
      children: <Widget>[
        TextButton(
          onPressed: () {},
          child: const Text(
            'NEXT',
            style:
              TextStyle(color: Colors.blue),
          ),
        ),
        TextButton(
          onPressed: () {},
          child: const Text(
            'EXIT',
            style:
              TextStyle(color: Colors.blue),
          ),
        ),
      ],
    );
  },
  //Rest of the Stepper code (currentStep, onStepCancel, onStepContinue, steps...)
  //...
)

Answer 7

步进小部件自动实现该属性也已经告诉您：

controlsBuilder

。
如果你想删除这些控件，你只需重写该属性，传递另一个返回

SizedBox

的函数，正如 @Thepeanut 已经建议的那样。

我只想补充一点，你应该明确高度和宽度等于 0。
正如我在这里写的：

controlsBuilder: (context, details) {
 return const SizedBox(
  height: 0,
  width: 0,
 );
},

details

中方法的实现如下：

currentStep: _index,
onStepCancel: () {
 if (_index > 0) {
  setState(() {
   _index -= 1;
  });
 }
},
onStepContinue: () {
 if (_index <= (stepList.length - 2)) {
  setState(() {
   _index += 1;
  });
 }
},
onStepTapped: (int index) {
 setState(() {
  _index = index;
 });
},

Answer 8

                    Stepper(
                            steps: steps,
                            
                            controlsBuilder: (context, controller){
                              return SizedBox.shrink();
                            },
                          )

您可以将其添加到您的controlBuilder中

Answer 9

您可以使用控制构建器功能从步进器中隐藏继续和取消按钮。

controlsBuilder: (ctx, details) {
                          return Container();
                        },

在此输入图片描述

Answer 10

唯一要做的就是添加到Stepper：

controlsBuilder：（上下文，详细信息）=> Container()，