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

怎么选择看自己需求了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容