如何让Flutter的Text组件在Stepper标题中实现自动换行？

嘿，我来帮你搞定这个Stepper标题换行的问题！你现在遇到的情况是因为Step的title区域默认布局限制了Text的宽度，导致长文本无法自动换行。这里有几个简单有效的解决方法：

方法一：用Expanded包裹Text并配置换行属性 #

把原来直接传入的Text组件用Expanded包裹，同时给Text设置允许换行和不限行数的属性，这样Text就能占据标题区域的可用宽度，自动换行显示所有内容：

@override
Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stepper(
        currentStep: currentStepIndex,
        onStepContinue: () => setState(() => currentStepIndex++),
        onStepTapped: (int index) => setState(() => currentStepIndex = index),
        steps: questions
            .map((String q) => Step(
                  title: Expanded(
                    child: Text(
                      q,
                      softWrap: true, // 允许文本根据宽度自动换行
                      maxLines: null, // 不限制文本显示的行数
                    ),
                  ),
                  content: QuestionWidget(),
                ))
            .toList(),
      ),
    );

方法二：用Wrap组件包裹Text #

如果不想让Text占满整个标题宽度，也可以用Wrap组件来包裹Text，它会在空间不足时自动将文本换行：

// 修改Step的title部分即可
title: Wrap(
  children: [Text(q)],
)

这两种方法都能轻松解决长文本无法换行的问题，你可以根据自己的布局需求选择其中一种~

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