如何更改 Flutter 步进器中“继续/取消”按钮的标签?

s4chpxco  于 2023-04-07  发布在  Flutter
关注(0)|答案(6)|浏览(164)

是否有任何方法来改变文本标签的继续和取消按钮的步进器在扑?步进器似乎是完美的选择,我想做什么(长形式与几个“阶段”),在我去尝试建立一个从头开始只是为了获得其他标签的按钮,我想我可能会问。
有谁知道这是可能的吗?

093gszye

093gszye1#

是的,你可以通过提供一个controlsBuilder回调函数。它必须是一个接受另外两个函数(onStepContinueonStepCancel)的函数,这两个函数是你必须传递给你将要创建的新按钮的操作,以便它们能够正常工作。
然后你可以声明任何你想要的东西(在这个例子中是一行两个按钮),只要你传递两个函数(onStepContinueonStepCancel),让它们按预期工作:

Stepper(
      controlsBuilder: (BuildContext context,
          {VoidCallback? onStepContinue, VoidCallback? onStepCancel}) {
        return Row(
          children: <Widget>[
            TextButton(
              onPressed: onStepContinue,
              child: const Text('NEXT'),
            ),
            TextButton(
              onPressed: onStepCancel,
              child: const Text('EXIT'),
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          title: Text('A'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
        Step(
          title: Text('B'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
      ],
    );
ix0qys7i

ix0qys7i2#

flutter 2.8.1版里面的Stepper你可以用controlsBuilder你可以修改按钮

controlsBuilder: (context,_) {
                  return Row(
                    children: <Widget>[
                      TextButton(
                        onPressed: (){},
                        child: const Text('NEXT'),
                      ),
                      TextButton(
                        onPressed: (){},
                        child: const Text('EXIT'),
                      ),
                    ],
                  );
                },
o2g1uqev

o2g1uqev3#

controlsBuilder: (BuildContext context, ControlsDetails details) {
            final _isLastStep = _currentStep == _getSteps.length - 1;
            return Container(
                margin: const EdgeInsets.only(top: 50),
                child: Row(children: [
                  Expanded(
                      child: ElevatedButton(
                          child: Text(_isLastStep ? 'Send' : 'Next'),
                          onPressed: details.onStepContinue)),
                  const SizedBox(
                    width: 12,
                  ),
                  if (_currentStep != 0)
                    Expanded(
                        child: ElevatedButton(
                            child: Text('Back'),
                            onPressed: details.onStepCancel))
                ]));
          },
ars1skjm

ars1skjm4#

我迟到的讨论。但我刚刚做了,并认为这是很好的分享。代码是能够控制文本为每一步的代码如下。每一步将有不同的文本,设法做3个步骤。如果超过这一点,代码将是相当混乱。希望它有助于有人谁正在寻找它。

controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                _activeCurrentStep == 0
                    ? TextButton(
                        onPressed: onStepContinue,
                        child: const Text('NEXT'),
                      )
                    : _activeCurrentStep == 1
                        ? Container(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                TextButton(
                                  onPressed: onStepContinue,
                                  child: const Text('NEXT'),
                                ),
                                TextButton(
                                  onPressed: onStepCancel,
                                  child: const Text('BACK'),
                                ),
                              ],
                            ),
                          )
                        : _activeCurrentStep >= 2
                            ? Container(
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    TextButton(
                                      onPressed: onStepContinue,
                                      child: const Text('SAVE'),
                                    ),
                                    TextButton(
                                      onPressed: onStepCancel,
                                      child: const Text('BACK'),
                                    ),
                                  ],
                                ),
                              )
                            : TextButton(
                                onPressed: onStepCancel,
                                child: const Text('BACK'),
                              ),
              ],
            );
          },
w6mmgewl

w6mmgewl5#

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...)
  //...
)
yftpprvb

yftpprvb6#

Flutter以其SDK的不断更新而闻名。为了实现上述任务,这对我来说是有效的。

Stepper( controlsBuilder(BuildContext context, ControlsDetails details) {
                return Container(
                  margin: const EdgeInsets.only(top: 24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      OutlinedButton(
                        onPressed: details.onStepCancel,
                        style: OutlinedButton.styleFrom(
                            maximumSize: const Size(0, 48)),
                        child: Text('CANCEL',
                            style: GoogleFonts.poppins(
                                fontSize: 14, fontWeight: FontWeight.w600)),]))}

这与flutter 3.7.9 SDK完美兼容。

相关问题