机遇屋-Flutter Widget显示隐藏控制

Flutter Widget显示隐藏控制

作者：ych

### 设计介绍
在wpf中我们可以用visible来控制控件的显示和隐藏，那在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种方法选择时除了衡量性能之外，其实更重要的是要符合当前开发的业务。

评论区

先去登录