微信交流群

老孟公众号

# Visibility

控制子组件隐藏/可见的组件

Visibility({
    Key key,
     this.child,
    this.replacement = const SizedBox.shrink(),//不可见时显示的组件(当maintainState=false)
    this.visible = true,//子组件是否可见,默认true(可见)
    this.maintainState = false,//不可见时是否维持状态,默认为false
    this.maintainAnimation = false,//不可见时,是否维持子组件中的动画
    this.maintainSize = false,//不可见时是否留有空间
    this.maintainSemantics = false,//不可见时是否维持它的语义
    this.maintainInteractivity = false,//不可见时是否具有交互性
  })
1
2
3
4
5
6
7
8
9
10
11

Offstage与Visibility比较:

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

Visibility的用法比较简单,控制控件的显示和隐藏,基本用法如下:

Visibility(
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
)
1
2
3
4
5
6
7

默认可见,效果如下:

设置为不可见:

Visibility(
  visible: false,
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
)
1
2
3
4
5
6
7
8

此时蓝色的盒子消失。

replacement参数表示隐藏情况下显示的组件,用法如下:

Visibility(
  visible: false,
  replacement: Container(
    height: 50,
    width: 50,
    color: Colors.red,
  ),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下:

image-20200420211359899

maintainState:表示不可见时是否维持状态,设置为true时,子控件依然会保存在内存中。

maintainAnimation:表示不可见时是否维持动画状态。

maintainSize:表示不可见时是否维持大小。

maintainInteractivity:表示不可见时是否可交互。

本文由Rock提供。