特点#

• 隐藏子组件：当 offstage: true 时，子组件从布局树中移除，不会占用任何空间，也不会渲染。
• 保持状态：尽管子组件不可见，它仍然保持状态和动画。例如，动画仍然会继续运行，尽管它们不可见，这可能会消耗 CPU 和电池资源 1 5。
• 适合测量尺寸：Offstage 可以在不显示组件的情况下测量其尺寸，这对于某些需要提前知道尺寸的场景非常有用 5。

场景#

• 临时隐藏组件：如果你希望暂时隐藏一个组件，但不希望销毁它的状态（例如表单输入或动画），可以使用 Offstage。
• 性能优化：相比于 Visibility 的某些选项（如 maintainState），Offstage 不会让不可见的组件参与布局和渲染，因此在需要隐藏但保留状态的情况下，它可能更高效 3 4。

示例#

1
Offstage(
2
  offstage: true,  // 设置为 true 隐藏组件
3
  child: Text('这个文本将被隐藏'),
4
)

当 offstage: true 时，文本将被隐藏且不占用任何空间；当设置为 false 时，文本将正常显示。

对比#

• Visibility：虽然也可以隐藏组件，但 Visibility 提供了更多选项来决定是否保留大小、状态等。相比之下，Offstage 更加简单直接，它只负责是否参与布局和渲染 2 3。
• Opacity：设置透明度为 0.0 的组件仍然会参与布局和渲染，只是不可见，并且仍然可以响应用户交互。相比之下，Offstage 的子组件完全不参与布局和渲染 2 4。

总结来说，Offstage 是一个高效的工具，用于在不销毁状态的情况下临时隐藏组件，并且它不会影响应用的布局或渲染。