flutter - 如何自定义 flutter 中的步进器并通过内容中的小部件进行控制？

Question

我在我的 View 中创建了一系列步骤，我想使用 Flutter 中的 Stepper Widget 来实现这些步骤。但是我希望这些步骤由内容中的小部件而不是继续和取消触发。我尝试使用 controlBuilder 但是它为每个步骤创建相同的控件小部件。在我的要求中，我想要不同的小部件来触发流程。我的第一步是一个是非问题。 Next Step应该通过view中是否有图片等来控制。
我如何实现这一目标？

有没有办法创建自定义 Stepper bar 并完全避免 Stepper 类？

这是我想用步进器实现的流程:

https://ibb.co/KzJYGdQ

https://ibb.co/BsHZbHd

我尝试了以下代码:

import 'package:flutter/material.dart';

class StepperView extends StatefulWidget{
  @override
  _stepperViewState createState() => _stepperViewState();
}

class _stepperViewState extends State<StepperView> {

  //bool itemBought = false;

  int _currentstep = 0;
  void _movetonext() {
    setState(() {
      if(_currentstep< steps.length-1){
        _currentstep++;
      }
    });
  }

  void _movetostart() {
    setState(() {
      _currentstep = 0;
    });
  }


  List<Step> steps = [
    Step(
      title: Text("Item bought?"),
      content: Column(
  children: <Widget> [
  Row(
  children: <Widget>[

  GestureDetector(
  //onTap: _movetonext,
    // (GIVES ERROR: only static members can accessed in initializers )
  child: Container(decoration: BoxDecoration(border: Border.all(color: Colors.red, width: 1.0), borderRadius: BorderRadius.circular(20.0)),child: Center(
  child: Padding(
  padding: const EdgeInsets.only(top: 6.0, bottom: 6.0, left: 20.0, right: 20.0),
  child: Text('NO', style: TextStyle(color: Colors.red, fontSize: 9.0)),
  ),
  )),
  ),
  SizedBox(width: 10.0),

  GestureDetector(
 //onTap: _movetostart,
    // (GIVES ERROR: only static members can accessed in initializers )
  child: Container(decoration: BoxDecoration(color: Colors.red,border: Border.all(color: Colors.red, width: 1.0),borderRadius: BorderRadius.circular(20.0)),child: Center(
  child: Padding(
  padding: const EdgeInsets.only(top: 6.0, bottom: 6.0, left: 20.0, right: 20.0),
  child: Text('YES', style: TextStyle(color: Colors.white, fontSize: 9.0)),
  ),
  )),
  ),

  ])]),
      isActive: true,
    ),

    Step(
      title: Text("Step 2"),
      content: Text("this is the second step"),
      isActive: true,
    ),
  ];


  @override
  Widget build(BuildContext context) {

    return Stepper(
      controlsBuilder:
          (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        /*return Row(
          children: <Widget>[
            FlatButton(
              onPressed: onStepContinue,
              child: const Text('CONTINUE'),
            ),
            FlatButton(
              onPressed: onStepCancel,
              child: const Text('CANCEL'),
            ),
          ],
        ); */
      },
      currentStep: this._currentstep,
      type: StepperType.vertical,
      steps: steps,
      onStepTapped: (step){
          setState(() {
            _currentstep = step;
          });
        },
        onStepCancel: _movetostart,
        onStepContinue: _movetonext
      ,
    );
  }

}

Answer 1

虽然您的用例似乎对 Stepper 进行了非常规设计，但可以修改现有的 Stepper 小部件。您只需复制现有的 Stepper 小部件类并添加将覆盖“下一步”和“取消”按钮上的文本设置的参数。
在 Step 类上添加所需的参数。为简单起见，省略了一些未更改的行。

class CustomStep {
  /// Creates a step for a [CustomStepper].
  ///
  /// The [title], [content], and [state] arguments must not be null.
  const CustomStep({
  required this.title,
  this.subtitle,
  required this.content,
  this.state = StepState.indexed,
  this.isActive = false,
  this.continueButtonLabel, // String for 'Next' button
  this.cancelButtonLabel,   // String for 'Cancel' button
  }) : assert(title != null),
  assert(content != null),
  assert(state != null);

  ...

  /// Set a different text on Stepper Continue Button
  final String? continueButtonLabel;

  /// Set a different text on Stepper Cancel Button
  final String? cancelButtonLabel;
}

然后在里面 _CustomStepperState类，添加 index Widget _buildVerticalControls() 的参数.找到 TextButton 'Next' 和 'Cancel' 按钮并修改它们以能够处理您设置的参数。

Widget _buildVerticalControls(int index) {

  ...

  // If continueButtonLabel is empty, display default text
  Text((widget.steps[index].continueButtonLabel !=null) ? widget.steps[index].continueButtonLabel! : localizations.continueButtonLabel)
  
  ...

  // If cancelButtonLabel is empty, display default text
  Text((widget.steps[index].cancelButtonLabel !=null) ? widget.steps[index].cancelButtonLabel! : localizations.cancelButtonLabel),
}

使用这种方法，还可以更改按钮的外观。这是complete custom_stepper.dart如果你想尝试一下。
在您的屏幕上，您只需要添加参数 continueButtonLabel和 cancelButtonLabel让它工作。

int _index = 0;
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: CustomStepper(
        currentStep: _index,
        onStepCancel: () {
          if (_index > 0) {
            setState(() {
               _index -= 1;
            });
          }
        },
        onStepContinue: () {
          if (_index <= 0) {
            setState(() {
              _index += 1;
            });
          }
        },
        onStepTapped: (int index) {
          setState(() {
            _index = index;
          });
        },
        steps: <CustomStep>[
          CustomStep(
            title: const Text('Step 1 title'),
            content: Container(
              alignment: Alignment.centerLeft,
              child: const Text('Content for Step 1'),
            ),
            // Set custom label for the 'Next' button
            continueButtonLabel: 'Next',
            // Set custom label for the 'Cancel' button
            cancelButtonLabel: 'Back',
          ),
          const CustomStep(
            title: Text('Step 2 title'),
            content: Text('Content for Step 2'),
          ),
        ],
      ),
    ),
  );
}