Flutter 中显示隐藏组件的对比

主要显示隐藏组件

1. Visibility 组件

Visibility(
  visible: condition,
  child: YourWidget(),
)

• 特点：通过 visible 属性控制子组件的可见性
• 渲染行为：即使隐藏也会占用布局空间
• 性能：隐藏时仍会进行布局计算

2. Opacity 组件

Opacity(
  opacity: condition ? 1.0 : 0.0,
  child: YourWidget(),
)

• 特点：通过透明度控制视觉效果
• 渲染行为：隐藏时不透明但仍占用空间
• 交互：隐藏后仍可接收手势事件

3. AnimatedOpacity 组件

AnimatedOpacity(
  opacity: condition ? 1.0 : 0.0,
  duration: Duration(milliseconds: 300),
  child: YourWidget(),
)

• 特点：带动画过渡效果
• 用途：适合需要渐显/渐隐动画的场景

4. Offstage 组件

Offstage(
  offstage: !condition,
  child: YourWidget(),
)

• 特点：完全从渲染树中移除
• 渲染行为：不占用布局空间，不消耗渲染资源
• 性能：最佳性能选择

5. ConditionalBuilder 模式

condition ? YourWidget() : SizedBox.shrink()
// 或
condition ? YourWidget() : Container()

• 特点：条件性地创建/销毁组件
• 性能：最优，完全不渲染隐藏组件

组件差异总结

推荐使用场景

• 频繁切换：使用 Offstage 或 Visibility
• 需要动画：使用 AnimatedOpacity
• 静态条件：使用 ConditionalBuilder
• 保留布局：使用 Opacity 或 Visibility 的 maintainSize 选项