Flutter Offstage、Visibility隐藏/可见

最新推荐文章于 2025-07-24 09:53:37 发布

原创最新推荐文章于 2025-07-24 09:53:37 发布 · 1.8w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Offstage隐藏/可见 #Flutter 隐藏/可见 #Flutter 可见/隐藏 #Flutter Visibility隐藏/可见

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中用于控制组件可见性的两个关键组件：Offstage和Visibility。Offstage组件默认隐藏其子组件，而Visibility提供了更丰富的功能，如保持状态、动画、大小和语义。文章对比了两者的参数和使用场景，并附上了代码示例。

Offstage是控制组件隐藏/可见的组件，如果感觉有些单调功能不全，我们可以使用Visibility，Visibility也是控制子组件隐藏/可见的组件。不同是的Visibility有隐藏状态是否留有空间、隐藏状态下是否可调用等功能。

参数详解

属性	说明
Offstage
offstage	子组件是否可见，默认true（隐藏）
child	子组件
Visibility
child	子组件
replacement	不可见时显示的组件（当maintainState = false）
visible	子组件是否可见，默认true（可见）
maintainState	不可见时是否维持状态，默认为false
maintainAnimation	不可见时，是否维持子组件中的动画
maintainSize	不可见时是否留有空间（设置为true，会报错。如果想隐藏并保留组件空间请使用Opacity）
maintainSemantics	不可见时是否维持它的语义（我也没搞明白是什么）
maintainInteractivity	不可见时是否具有交互性

代码示例

Offstage

Offstage(
  offstage:false,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
),

Visibility

Visibility(
  visible:_offstage,
  replacement:Text('data'),
  maintainState:true,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.yellow,
  ),
),

效果图