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 -- ')
              ],
            ),
          )
        ],
      )