Question

我想自定义步进机。

如何在每个步骤栏的左侧放置步骤标题？
如何将线条更改为步进的点线？
以及如何自定义步骤的状态，而不是像圆气泡一样提供的5 StepState ？

这是我的代码。

Container(
  child: Stepper(
    currentStep: 0,
    controlsBuilder: (BuildContext context, {
      VoidCallback onStepContinue,
      VoidCallback onStepCancel
    }) => Container(),
    steps: [
      Step(
        content: Container(
          child: Card(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text('9:00Am - 10:00AM'),
                Text(
                  'Everest Tour',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
        ),
        title: Text('9:00 AM'),
      ),
      Step(
        content: Text('2nd Data'),
        title: Text('10:00 AM'),
        state: StepState.editing,
        isActive: true,
        subtitle: Text('subtitle')
      )
    ],
  ),
)

Answer 1

您可以通过修改原始 Stepper 小部件类来自定义 Stepper 小部件。这是我创建的 customized Stepper widget，可以使用可选的 stepIndicatorAlignment 和 dottedLine 参数进行配置。 “继续”和“取消”按钮上的文字也可以修改。

这是一个如何实施的示例。

CustomStepper(
  // stepIndicatorAlignment is set to StepIndicatorAlignment.left by default if not configured
  stepIndicatorAlignment: StepIndicatorAlignment.right,
  // dottedLine is set to false by default if not configured
  dottedLine: true, 
  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'),
      ),
      continueButtonLabel: 'YES',
      cancelButtonLabel: 'NO',
    ),
    CustomStep(
      title: Text('Step 2 title'),
      content: Container(
        alignment: Alignment.centerLeft,
        child: Text('Content for Step 2'),
      ),
    ),
  ],
),

在此 similar Stack Overflow post 中，我已经解释了如何修改现有的 Flutter Stepper 小部件。

在Flutter中自定义步进器

1 个答案: