在 Flutter 中自定义步进器

Question

我想自定义颤振中的步进器。

1. 如何将步骤标题放置在每个步骤栏的左侧？

2. 如何将线条更改为步进器的虚线条？

3. 除了像圆形气泡一样提供的 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 小部件。 这是我创建的 自定义 Stepper 小部件，可以使用可选的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'),
      ),
    ),
  ],
),

在这篇类似的 Stack Overflow 帖子中，我解释了如何修改常用的 Flutter Stepper 小部件。