Flutter - 显示/隐藏控件的几种方法

1. if 判断

if(!_hidden)
    Container(
        color: Colors.deepOrangeAccent,
        child: TestWidget(msg: 'if 判断',),
     )

实际效果，不会占位，隐藏时TestWidget不会加载，可else一个占位(则会加载占位的组件)

2. Opacity

Container(
              color: Colors.red,
              child: Opacity(
                opacity: _hidden?0:1,//会占位高度
                child: TestWidget(msg: 'Opacity',),
              ),
            ),

实际效果，会占位，显示隐藏TestWidget都会加载

2. Offstage

Container(
              color: Colors.grey,
              child: Offstage(
                offstage: _hidden,///无占位高度
                child: TestWidget(msg: 'Offstage',),
              ),
            ),

实际效果，不会占位，显示隐藏TestWidget都会加载

3. Visibility

Container(
              color: Colors.cyanAccent,
              child: Visibility(
                  maintainAnimation: true,
                  maintainState: true,
                  maintainSize: true,//隐藏需要占位，前俩个也需要为true，内部断言会判断,不需要时都为false,maintainState影响是否加载
                  child: TestWidget(msg: 'Visibility',),
                  visible: _hidden
              ),
            ),

实际效果，可选择是否占位，不占位，隐藏时TestWidget不会加载，占位，显示隐藏TestWidget都会加载

测试：

Visibility选择占位时，隐藏TestWidget

May-22-2022 20-12-37.gif

Visibility选择占位时，显示TestWidget

May-22-2022 20-15-12.gif

Visibility选择不占位时，隐藏TestWidget

May-22-2022 20-18-19.gif

Visibility选择不占位时，显示TestWidget

May-22-2022 20-19-51.gif

怎么选择看自己需求了。