Flutter控件的显示与隐藏

旺仔大牛

已于 2023-06-15 14:21:12 修改

阅读量6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Flutter学习文章标签： Flutter visibility offstage opacity widget

于 2021-05-21 23:09:29 首次发布

本文链接：https://blog.youkuaiyun.com/adojayfan/article/details/117136414

Flutter学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Flutter中控制Widget显示的三种方式：Visibility、Offstage和Opacity。Visibility提供可视性控制，并有额外的属性如maintainState、maintainAnimation和maintainSize。Offstage则在隐藏时不会占用空间，而Opacity通过调整透明度实现隐藏。理解这些属性的相互关系和使用场景对于优化Flutter应用性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Android中，使用visibility属性控制View是否显示。
同样地，Flutter也使用Visibility来控制Widget是否显示。
同时也可以使用Offstage或Opacity来控制。

Visibility

 Visibility(
   visible: true,
   /// 隐藏时是否保持占位
   maintainState: false,
   /// 隐藏时是否保存动态状态
   maintainAnimation: false,
   /// 隐藏时是否保存子组件所占空间的大小，不会消耗过多的性能
   maintainSize: false,
   child: Text("显示"),
 ),

使用visible来控制子组件显示或隐藏。

Visibility最灵活，还同时提供了3个属性maintainState、maintainAnimation 、maintainSize。
这三个属性有相互依赖.
以下是部分源码，
如果随便设置3个值，可能会报异常。

       assert(
         maintainState == true || maintainAnimation == false,
         'Cannot maintain animations if the state is not also maintained.',
       ),
       assert(
         maintainAnimation == true || maintainSize == false,
         'Cannot maintain size if animations are not maintained.',
       ),
       assert(
         maintainSize == true || maintainSemantics == false,
         'Cannot maintain semantics if size is not maintained.',
       ),
       assert(
         maintainSize == true || maintainInteractivity == false,
         'Cannot maintain interactivity if size is not maintained.',
       );

Offstage

 //能控件隐藏或显示，但是隐藏时不会占位。
 Offstage(
   offstage: true,
   child: Text("显示"),
 ),

Opacity

 ///0表示完全透明，也相当于隐藏
 ///1代表完全不透明，相当于完全显示
 Opacity(
   opacity: 0,
   child: Text("隐藏"),
 ),