Flutter 隐藏组件之Visibility

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.
适宜人群: 入门

引言

如果你想要隐藏 Widget , 那么 Visibility 应该是 Flutter 中最为有效的控件之一了. 本文将向你介绍它的用法和原理.

用法

Visibility 参数包括 replacement、visible、maintainState、maintainAnimation、maintainSize、maintainSemantics、maintainInteractivity .

visible 与 replacement

实际使用中, 最多的是 visible . 当为 false 时, 即隐藏当前 widget , 显示 replacement . 而为 true 时, 则显示当前 widget. 在其他参数不变时, visible 与 replacement 的关系就像是精灵宝可梦.

根据 visiable 的属性决定是用 child 还是 replacement 显示在屏幕上. 值得一提的是, 这时切换 visable 会销毁不在屏幕上的那部分 widget . 而如果你想维持状态的话, 则需要用到下文提到的 maintainState 一类的属性了.

maintain(*)

maintainState 用于维护小部件不可见时的 state 不被销毁
maintainAnimation 在小部件不可见时仍然维护小部件的动画
maintainSize 用于小部件不可见时保留小部件的尺寸
maintainSemantics 用于小部件不可见时维护语义
maintainInteractivity 用于小部件不可见时维护小部件的可交互性

这里, 本文也整理了一下关于 maintain(*) 属性的一些强要求, 比如说当某些属性为 true 时, 会同时需要其他属性也为 true.

属性	属性为true时条件	属性为false时条件
maintainState	无	maintainAnimation必须为false
maintainAnimation	无	maintainSize 必须为false
maintainSize	maintainAnimation、maintainState必须为true	maintainSemantics、maintainInteractivity必须为false
maintainSemantics	maintainSize必须为true	无
maintainInteractivity	maintainSize必须为true	无

之所以这么设计呢~ 在涉及 maintain(*) 属性中, 都涉及到了其他的小部件的使用, 例如 maintainSize 中使用到了 Opacity , 而 maintainState 中则使用了 Offstage .所以当涉及此类 api 时, 会有额外的性能损耗.

原理

默认情况下, Visibility 可以隐藏 widget 是借助了 setState 方法, 刷新当前 widget 树, 替换节点的方法不再占位. 当我们需要保持小部件尺寸或者维持状态时, 则是通过其他组件的协助.

从 Visibility 的用法中, 我们可以学到单一职责在实际开发中的运用还是很多的. 我们可以相互叠加达到 1+1>2 的效果, 但是运用中也要注意性能损耗. 非必要情况还是不维护已隐藏的 widget!