Flutter：Row布局内容溢出时如何将文本置于容器下方

问题原因 #

Row是强制单行布局组件，当子组件总宽度超出父容器可用宽度时，溢出内容不会自动换行，只会触发溢出警告或被截断，无法实现文本换行到红色容器下方的效果。

解决方案 #

将Row替换为Wrap组件，Wrap会根据父容器可用空间自动调整子组件排列，当一行无法容纳所有子组件时，自动将后续组件换行到下一行，完全匹配预期效果。

修改后的代码：

Wrap(children: [
  Text("test test"),
  Container(height: 50, width: 50, color: Colors.red),
  Text("test test test test test test test")
])

补充优化 #

如果需要让最后一段文本在换行后占满剩余宽度，可以给第三个Text包裹Flexible组件，既保证换行逻辑，又能充分利用可用空间：

Wrap(children: [
  Text("test test"),
  Container(height: 50, width: 50, color: Colors.red),
  Flexible(
    child: Text("test test test test test test test"),
  )
])

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