隐藏子组件有多种方式，常见的包括 Visibility、Offstage 和 Opacity。

1. Visibility#

Visibility 是Flutter中最常见的用于控制组件可见性的方式之一。它通过设置 visible 属性来决定组件是否显示。

特点#

• 当 visible: false 时，组件不会渲染到屏幕上，但仍然占据布局空间。
• 可以通过 maintainState、maintainSize 等属性来控制是否保留组件的状态、大小等。

适用场景#

• 如果你希望隐藏组件但仍然保留其在布局中的位置（即占据空间），可以使用 Visibility。

性能#

• Visibility 虽然不渲染隐藏的组件，但由于它仍然参与布局计算，因此性能开销相对较大，特别是在复杂布局中。

示例#

Visibility(
  visible: false,
  child: Text("This text is hidden"),
)

2. Offstage#

Offstage 是另一种隐藏组件的方法，它通过将组件从树中移除来实现隐藏效果。

特点#

• 当设置为 offstage: true 时，组件不会渲染，也不会参与布局计算。
• 不占用任何空间，也不会响应用户交互。
• 组件仍然保留在Widget树中，因此状态依然存在。

适用场景#

• 当你希望完全移除组件的渲染和布局计算，但仍需保留其状态时，可以使用 Offstage。

性能#

• Offstage 的性能优于 Visibility，因为它不仅不渲染，还避免了布局计算。

示例#

Offstage(
  offstage: true,
  child: Text("This text is offstage"),
)

3. Opacity#

Opacity 通过调整透明度来控制组件的可见性。它允许你将组件的透明度设置为0，从而“隐藏”组件。

特点#

• 当透明度为0时，组件仍然会渲染并占据空间，只是不可见。
• 透明度为0时，组件依然会响应用户交互（例如点击事件）。

适用场景#

• 当你希望隐藏一个组件但仍然需要它响应用户交互时，可以使用 Opacity(0)。

性能#

• Opacity(0) 会渲染不可见的子组件，因此性能开销较大。对于复杂的UI或动画场景，可能会影响帧率。

示例#

Opacity(
  opacity: 0.0,
  child: Text("This text is invisible but still interactive"),
)

对比总结#

使用建议#

1. 如果只想隐藏一个组件，但希望它占据空间并保持状态，使用 Visibility。
2. 如果希望移除一个组件的渲染和布局计算，但保留其状态，选择 Offstage。
3. 如果需要隐藏一个组件，但仍希望它响应用户交互（例如透明按钮），可以使用 Opacity。
4. 如果打算完全移除一个组件，直接从 Widget 树中移除可能是更好的选择。

参考链接