flutter Stepper实现 标题在图标下方

在Flutter中，Stepper控件通常用于创建一个步骤条，让用户可以按照一定步骤进行任务。它默认情况下标题是在图标的上方的，但如果你想要将标题移动到图标下方，可以通过自定义Stepper的每个步骤的布局来实现。

以下是一个基本的步骤，介绍如何将标题放置在图标下方：

1. 使用`Stepper`控件，然后在其`steps`属性中定义你每个步骤的内容。
2. 对于`Step`控件，你可以使用`title`属性来设置标题，`content`属性来设置内容。
3. 为了将标题移动到图标下方，你可以创建一个`Row`布局，并在这个布局中将`title`放置在`Icon`的下方。

下面是一个简单的代码示例：

Stepper(
  steps: [
    Step(
      title: Text('标题一'),
      content: Text('这里是内容一'),
      state: StepState.complete,
      isActive: true,
    ),
    Step(
      title: Text('标题二'),
      content: Text('这里是内容二'),
      state: StepState.complete,
      isActive: true,
    ),
    // 更多步骤...
  ],
  currentStep: _currentStep, // 当前步骤的索引
  onStepContinue: () {
    if (_currentStep < _maxSteps - 1) {
      setState(() {
        _currentStep++;
      });
    }
  },
  onStepCancel: () {
    if (_currentStep > 0) {
      setState(() {
        _currentStep--;
      });
    }
  },
)

如果你想要创建一个标题在图标下方的布局，可以自定义每个`Step`，如下所示：

Step(
  title: Text('步骤标题'),
  content: Text('这里是内容'),
  state: StepState.complete,
  isActive: true,
  subtitle: Text('这个文本将作为图标下方的标题显示'), // 自定义的文本
  icon: Icon(Icons.info), // 使用一个图标
),

这样，你就可以通过自定义`subtitle`属性来实现标题在图标下方的布局。记得对每个`Step`都进行相应的自定义设置。