Flutter中Row组件嵌套多个Text出现溢出，如何实现多行显示？

出现RenderFlex overflowed错误是因为Row默认强制子组件在单行排列，当子组件总宽度超出容器可用宽度时就会触发溢出。要让Text实现多行显示，可采用以下几种方案：

方案1：用Expanded包裹每个Text #

Expanded会分配Row内的剩余可用空间给子组件，Text在空间不足时会自动换行：

Row(
  children: [
    Expanded(child: Text("this is text 1 bla bla bla")),
    Expanded(child: Text("this is text 2 bla bla bla")),
    Expanded(child: Text("this is text 3 bla bla bla")),
  ],
)

若需要调整各Text的宽度占比，可给Expanded添加flex属性（例如flex:2的组件会占用flex:1组件双倍的空间）。

方案2：用Flexible包裹Text #

Flexible允许子组件根据自身内容大小调整尺寸，不会强制填满可用空间，适合文本长度不确定的场景：

Row(
  children: [
    Flexible(child: Text("this is text 1 bla bla bla")),
    Flexible(child: Text("this is text 2 bla bla bla")),
    Flexible(child: Text("this is text 3 bla bla bla")),
  ],
)

方案3：限制Text最大行数（可选） #

如果需要限制Text的显示行数，可结合maxLines和overflow属性控制超出部分的表现：

Row(
  children: [
    Expanded(
      child: Text(
        "this is text 1 bla bla bla",
        maxLines: 2,
        overflow: TextOverflow.ellipsis, // 超出部分显示省略号
      ),
    ),
    // 其余Text组件同理设置
  ],
)

注：Text默认softWrap: true，已支持自动换行，无需额外设置。

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