Flutter - 如何更改步进器最后一步的按钮？答案

【问题标题】：Flutter - How do I change the buttons on the last step in the Stepper?Flutter - 如何更改步进器最后一步的按钮？
【发布时间】：2022-06-23 01:38:49
【问题描述】：

我正在开发一个应用程序，该应用程序会引导用户完成四个不同的步骤，每个步骤都需要用户提供一些信息。我正在使用步进器，我想用自定义按钮替换最后一步按钮。我该怎么做呢？

【问题讨论】：

有没有办法用最后一步继续按钮调用函数？
欢迎来到 SO！请阅读“How to Ask”及其链接页面。你研究过这个吗？在哪里？如果它没有帮助告诉我们原因。你尝试了什么？如果你不尝试，为什么不呢？如果你做了，你做了什么？我们希望看到您最小的尝试来解决它。如果没有这些证据，您似乎希望我们为您查找文档或教程或编写代码，这是题外话。

标签： flutter dart

【解决方案1】：

Stepper Widget中没有设置/更改按钮的属性

您可以使用enhance_stepper包进行修改。

  Widget buildStepperCustom(BuildContext context) {
    return EnhanceStepper(
        stepIconSize: 30,
        type: _type,
        horizontalTitlePosition: HorizontalTitlePosition.bottom,
        horizontalLinePosition: HorizontalLinePosition.top,
        currentStep: _index,
        physics: ClampingScrollPhysics(),
        steps: tuples.map((e) => EnhanceStep(
          icon: Icon(e.item1, color: Colors.blue, size: 30,),
          state: StepState.values[tuples.indexOf(e)],
          isActive: _index == tuples.indexOf(e),
          title: Text("step ${tuples.indexOf(e)}"),
          subtitle: Text("${e.item2.toString().split(".").last}",),
          content: Text("Content for Step ${tuples.indexOf(e)}"),
        )).toList(),
        onStepCancel: () {
          go(-1);
        },
        onStepContinue: () {
          go(1);
        },
        onStepTapped: (index) {
          ddlog(index);
          setState(() {
            _index = index;
          });
        },
        controlsBuilder: (BuildContext context, { VoidCallback? onStepContinue, VoidCallback? onStepCancel }){
          return Row(
            children: [
              SizedBox(height: 30,),
              ElevatedButton(
                onPressed: onStepContinue,
                child: Text("Next"),
              ),
              SizedBox(width: 8,),
              TextButton(
                onPressed: onStepCancel, 
                child: Text("Back"), 
              ),
            ],
          );
        }
    );

【讨论】：

【解决方案2】：

我使用布尔值作为 lastField 设置为 false。

在步骤 continue 和 step cancel 中，我检查了当前步骤是否是最后一步，并适当地更改 lastField。

然后你可以根据 lastField 更改控件生成器。

所以我的 on step continue 看起来像这样：

onStepContinue: (){
        if(forms[_currentStep].currentState!.validate()){
          _currentStep < 3 ?
          setState((){
            _currentStep += 1;
            if(_currentStep == 3){
              lastField = true;
            }else{
              lastField = false;
            }
          }): null;
        }
        },

我的控件构建器看起来像这样：

controlsBuilder: (context, details){
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: lastField ? Row(
            children: [
              ElevatedButton(onPressed: (){}, child: const Text("Submit"), style: ElevatedButton.styleFrom(primary: buttonPurple, shape: const StadiumBorder()),),
              TextButton(onPressed: details.onStepCancel, child: const Text("Cancel", style: TextStyle(color: Colors.white70),))
            ],
          ) : Row(
            children: [
              ElevatedButton(onPressed: details.onStepContinue, child: const Text("Next"), style: ElevatedButton.styleFrom(primary: buttonPurple, shape: const StadiumBorder()),),
              TextButton(onPressed: details.onStepCancel, child: const Text("Cancel", style: TextStyle(color: Colors.white70),))
            ],
          )
        );
      },

【讨论】：