Flutter中如何在Stepper的步骤标题中添加文本与图标

嘿，别着急！其实实现这个需求的思路你是对的，只是可能之前的细节没处理到位～

Step组件的title属性本身就支持任意Widget，所以直接用Row把文本和图标组合起来就行，完全不会影响步骤编号位置的默认图标（那个是由Step的icon属性单独控制的，咱们不动它就好）。

修改后的完整代码 #

import 'package:flutter/material.dart';
class CreateProject extends Stateful Widget {
  CreateProject({Key key}) : super(key: key);
  @override
  _CreateProjectState createState() => _CreateProjectState();
}
class _CreateProjectState extends State<CreateProject> {
  @override
  Widget build(BuildContext context) {
    return Stepper(
      currentStep: 3,
      controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: <Widget>[
            Container(
              child: null,
            ),
            Container(
              child: null,
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          // 用Row组合文本和图标，添加间距让布局更美观
          title: Row(
            children: [
              Text('Step 1'),
              SizedBox(width: 8), // 文本与图标之间的间距
              Icon(Icons.info_outline, size: 16, color: Colors.blue),
            ],
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: Row(
            children: [
              Text('Step 2'),
              SizedBox(width: 8),
              Icon(Icons.check_circle_outline, size: 16, color: Colors.green),
            ],
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: Text('Step 3'), // 也可以保留纯文本的步骤
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
        Step(
          title: Row(
            children: [
              Text('Step 4'),
              SizedBox(width: 8),
              Icon(Icons.warning_amber_outlined, size: 16, color: Colors.orange),
            ],
          ),
          content: SizedBox(
            width: 0.0,
            height: 0.0,
          ),
        ),
      ],
    );
  }
}

关键说明 #

• Step.title支持任意Widget类型，你可以根据需求灵活组合Text、Icon、SizedBox甚至自定义组件
• 步骤编号区域的图标由Step的icon属性控制，咱们没有修改这个属性，所以默认的编号/图标会保持原样
• 添加SizedBox是为了给文本和图标之间留出合适的间距，避免布局过于拥挤

这样就能轻松实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Kaushik Bhingradiya