Overflow 的原因

1. 固定尺寸超出父容器

// 错误示例
Container(
  width: 100,
  height: 100,
  child: Container(
    width: 200, // 子容器宽度超出父容器
    height: 200,
    color: Colors.red,
  ),
)

2. Row/Column 中的空间不足

// 错误示例
Row(
  children: [
    Container(width: 200, color: Colors.red),
    Container(width: 200, color: Colors.blue),
  ],
)

3. 嵌套过深或尺寸计算错误

// 错误示例
ListView(
  children: [
    Container(height: 1000),
    Container(height: 1000),
    Container(height: 1000), // 超出屏幕高度
  ],
)

解决方案

1. 使用弹性布局

Expanded

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Flexible

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

2. 使用可滚动容器

ListView

ListView(
  children: [
    Container(height: 200),
    Container(height: 200),
    Container(height: 200),
  ],
)

SingleChildScrollView

SingleChildScrollView(
  child: Column(
    children: [
      // 多个子组件
    ],
  ),
)

3. 使用约束性容器

ConstrainedBox

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 300,
    maxHeight: 200,
  ),
  child: Container(color: Colors.red),
)

SizedBox

SizedBox(
  width: 100,
  height: 100,
  child: Container(color: Colors.red),
)

欢迎大家在评论区一起学习flutter布局overflow的问题和解决方案。