如何让Flutter Row组件内的可变长度文本在可用空间内自动换行

问题根因 #

Row 布局中未被Flexible/Expanded包裹的子组件不会受到父布局的宽度约束，Text 组件无法感知到最大可用宽度，因此即使设置了softWrap: true也无法触发自动换行逻辑。

解决方案 #

将中间的 Text 组件用Flexible包裹即可，注意不要使用Expanded，否则会强制 Text 占满所有剩余水平空间，导致短文本场景下两侧的红色容器无法正常展示。

修改后的代码如下：

Row(
  children: [
    Expanded(
      flex: 1,           
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
    Flexible(
      child: Text(
        $variableLengthText,
        softWrap: true,
        // 可选配置：限制最大行数、设置溢出样式
        // maxLines: 2,
        // overflow: TextOverflow.ellipsis,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
  ],
)

实现效果 #

• 文本宽度小于可用空间时：左右两个红色 Container 平分剩余空间，文本自然居中，和原有预期一致
• 文本宽度超过可用空间时：Flexible 会自动限制 Text 的最大可用宽度，触发自动换行，此时无剩余空间分配给左右两侧的 Expanded 组件，红色容器会自动隐藏，符合需求。

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