如何实现textWidget1剩余文本换行？Wrap组件会导致整体换行

嘿，这个问题我之前也碰到过！Wrap组件的特性就是把每个子Widget当成一个独立的块来处理换行逻辑——当某个子Widget的宽度超过当前行剩余空间时，它会把整个子Widget挪到下一行，而不是让Widget内部的文本自动折行。要实现你想要的“文本在当前行剩余空间内自动换行”的效果，我们可以用Row配合Expanded（或Flexible）组件来搞定。

具体实现步骤 #

核心思路是：让需要换行的Text组件占据Row的剩余可用空间，这样当文本长度超过空间时，Text内部会自动触发换行，而不是整个组件被“挤”到下一行。

错误的Wrap写法（会整体换行）

Wrap(
  children: [
    Text("固定短文本："),
    Text("这是一段非常非常长的文本，我希望它在一行放不下的时候自动换行，而不是整个Text组件被移到下一行展示"),
  ],
)

正确的Row+Expanded写法（内部自动换行）

Row(
  // 确保文本顶部对齐，避免垂直居中的奇怪布局
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("固定短文本："),
    Expanded(
      child: Text(
        "这是一段非常非常长的文本，我希望它在一行放不下的时候自动换行，而不是整个Text组件被移到下一行展示",
        // softWrap默认就是true，这里明确写出是为了让逻辑更清晰
        softWrap: true,
      ),
    ),
  ],
)

额外说明 #

• Expanded vs Flexible：如果你的场景允许Text组件在空间不足时缩小（比如不需要占满剩余空间），可以用Flexible替代Expanded，但大多数情况下Expanded更符合“自动占满剩余空间并换行”的需求。
• 多组件混合场景：如果一行里有多个固定宽度的Widget和需要换行的Text，只需要把需要换行的Text放在Expanded里即可，其他固定Widget正常放在Row中：

  Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("标签A："),
      Expanded(
        child: Text("这里是需要自动换行的超长文本内容，不管长度多少都会在当前行剩余空间内折行"),
      ),
      Text(" | 标签B"),
    ],
  )
  

• RichText支持：如果用的是RichText而不是普通Text，同样可以把它放在Expanded里，RichText本身支持内部文本换行，逻辑完全一致。

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