如何在Flutter中实现该设计？解决Row组件布局溢出问题

1. 用Expanded包裹动态宽度子组件 #

如果Row内包含文本这类可能超出屏幕的组件，用Expanded包裹它，强制其占据Row的剩余可用空间，配合Text的softWrap: true实现自动换行，从根源避免溢出。

示例代码：

Row(
  children: [
    Icon(Icons.person),
    SizedBox(width: 8),
    Expanded(
      child: Text(
        "这是一段可能很长的文本内容，会自动占据Row的剩余空间并换行",
        softWrap: true,
      ),
    ),
    SizedBox(width: 8),
    Text("固定内容"),
  ],
)

2. 使用Flexible替代Expanded #

Flexible和Expanded功能类似，但不会强制子组件填满剩余空间，仅允许子组件根据自身尺寸调整，适合不需要占满空间的场景，同样能解决溢出问题。

示例代码：

Row(
  children: [
    Icon(Icons.email),
    SizedBox(width: 8),
    Flexible(
      child: Text(
        "较长的文本内容，只会占用需要的空间，超出时自动换行",
        softWrap: true,
      ),
    ),
    ElevatedButton(onPressed: () {}, child: Text("操作")),
  ],
)

3. 用Wrap组件替代Row #

如果子组件数量不确定，或希望空间不足时自动换行到下一行，直接用Wrap替换Row，它会自动处理溢出逻辑，将放不下的组件移至新行。

示例代码：

Wrap(
  spacing: 8, // 子组件水平间距
  runSpacing: 4, // 行与行之间的间距
  children: [
    Chip(label: Text("标签1")),
    Chip(label: Text("标签2")),
    Chip(label: Text("很长的标签内容，放不下就会自动换行")),
    Chip(label: Text("标签4")),
    Chip(label: Text("标签5")),
  ],
)

4. 横向滚动的Row（SingleChildScrollView包裹） #

若需要所有子组件保持在一行，允许用户横向滚动查看全部内容，用SingleChildScrollView包裹Row，并设置scrollDirection: Axis.horizontal。

示例代码：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 100, height: 50, color: Colors.red),
      Container(width: 100, height: 50, color: Colors.green),
      Container(width: 100, height: 50, color: Colors.blue),
      Container(width: 100, height: 50, color: Colors.yellow),
      Container(width: 100, height: 50, color: Colors.orange),
    ],
  ),
)

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