1. if 判斷

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

實(shí)際效果，不會(huì)占位，隱藏時(shí)TestWidget不會(huì)加載，可else一個(gè)占位(則會(huì)加載占位的組件)

2. Opacity

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

實(shí)際效果，會(huì)占位，顯示隱藏TestWidget都會(huì)加載

2. Offstage

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

實(shí)際效果，不會(huì)占位，顯示隱藏TestWidget都會(huì)加載

3. Visibility

Container(
              color: Colors.cyanAccent,
              child: Visibility(
                  maintainAnimation: true,
                  maintainState: true,
                  maintainSize: true,//隱藏需要占位，前倆個(gè)也需要為true，內(nèi)部斷言會(huì)判斷,不需要時(shí)都為false,maintainState影響是否加載
                  child: TestWidget(msg: 'Visibility',),
                  visible: _hidden
              ),
            ),

實(shí)際效果，可選擇是否占位，不占位，隱藏時(shí)TestWidget不會(huì)加載，占位，顯示隱藏TestWidget都會(huì)加載

測試：

Visibility選擇占位時(shí)，隱藏TestWidget

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

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

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

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