Flutter Widget顯示隱藏

在Android中我們可以用visibility來控制控件的顯示和隱藏，那在Flutter中我們怎麼控制呢？

其實，在Flutter中控制Widget顯示和隱藏有3中方法：

不過3種方法的核心思想都是根據變量的值去判斷的，所以先定義一個變量：

bool visible = true;

變量的值可以在事件中去控制，比如：

       onPressed: () {
         setState(() {
           visible = visible ? false : true;
         });
       }, 

ok， 進入正題。

方法一

visible ? Padding(padding: EdgeInsets.all(30), child: Text('yechaoa')) : Container(),

根據visible判斷顯示Padding 還是顯示一個空的Container。

方法二

                    Opacity(
                      opacity: visible ? 1.0 : 0.0,
                      child: Padding(
                        padding: EdgeInsets.all(30),
                        child: Text('Now you see me, now you don\'t!'),
                      ),
                    ),

opacity 其實是根據visible 控制透明度而已，其實還是佔位的，相當於invisible，而且也是會渲染繪製的。

AnimatedOpacity 是帶動畫的widget ：AnimatedOpacity(opacity: null, duration: null), //一個opacity和一個動畫時長

方法三

                    Offstage(
                      offstage: visible,
                      child: Column(
                        children: <Widget>[
                          ...
                        ],
                      ),
                    ),

offstage爲true時表示不渲染，也不佔位，相當於gone。

以上3種方法選擇時除了衡量性能之外，其實更重要的是要符合當前開發的業務。

Opacity：https://api.flutter.dev/flutter/widgets/Opacity-class.html

Offstage：https://api.flutter.dev/flutter/widgets/Offstage-class.html