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：api.flutter.dev/flutter/wid…

Offstage：api.flutter.dev/flutter/wid…