flutter中显示隐藏空间

目前看起来有三个：

Visibility 

Opacity

Offstage

区别：

这张图百度上能看到很多

大概意思就是

Visibility的话设置visibility为true（默认）显示 为false隐藏 

Offstage的话设置offstage为true（默认）隐藏   为false显示 

但是同时

两者不可见时子控件均不可见 切不触发事件 不占用空间

但是我们看到 在visbility中有两个属性 maintainSize 和 maintainState 

实际测试设置 maintainSize: true,//报错

 

查看源码 得知 如果想要保留空间 其实官方推荐你用Opacity即使用透明度 经测试 opacity为0时 当前控件以及子空间都隐藏 但是事件还在 空间也还在

另外我们看到 当设置maintainState为true时官方也说 推荐用Offstage

所以 具体用哪个 看具体需求吧 

顺便说一句

a?widget():sizebox() 来做显示隐藏 个人觉得不很好 最好使用上边这几个

亦或者还有改变widget的size的来做的 感觉不是很好

 

贴一下代码

Row(
        children: [
          Container(
            color: Colors.yellow,
            child: Column(
              children: [
                Visibility(
                  visible: false,
                  // maintainState: true,
                  // maintainSize: true,//报错 
                  // replacement: Text('隐藏了'),
                  child: Column(
                    children: [
                      Text('Visibility'),
                      TextButton(
                          onPressed: () {
                            print('Visibility');
                          },
                          child: Text('Visibility'))
                    ],
                  ),
                ),
                Text('Visibility -- '),
              ],
            ),
          ),
          Container(
            color: Colors.red,
            child: Column(
              children: [
                Opacity(
                  opacity: 0,
                  child: Column(
                    children: [
                      Text('Opacity'),
                      TextButton(
                          onPressed: () {
                            print('Opacity');
                          },
                          child: Text('Opacity'))
                    ],
                  ),
                ),
                Text('Opacity -- '),
              ],
            ),
          ),
          Container(
            color: Colors.green,
            child: Column(
              children: [
                Offstage(
                  // offstage: false,
                  child: Column(
                    children: [
                      Text('Offstage'),
                      TextButton(
                          onPressed: () {
                            print('Offstage');
                          },
                          child: Text('Offstage'))
                    ],
                  ),
                ),
                Text('Offstage -- ')
              ],
            ),
          )
        ],
      )