Flutter Visibility Widget

最新推荐文章于 2025-07-24 09:53:37 发布

原创

最新推荐文章于 2025-07-24 09:53:37 发布 · 718 阅读

标签

#Flutter Opacity #Visibility #隐藏控件

收录于

这篇博客详细介绍了Flutter中用于隐藏和控制控件透明度的三个主要Widget：Opacity、Offstage和Visibility。Opacity通过设置透明度使子控件变得透明或完全不可见，Offstage可以直接控制子控件是否绘制，而Visibility则提供了可见性控制，并可以选择维持子控件的状态和尺寸。此外，还讨论了其他动态管理Widget Tree来隐藏控件的方法。

Visibility Widget介绍

Opacity Widget
- - 构造函数说明
Offstage Widget
- - 构造函数
Visibility Widget
- - 构造函数
其他隐藏控件的方式

Opacity Widget

一个可以让子控件透明度发生变化的控件.

构造函数说明

const Opacity({
    Key? key,
    required this.opacity,//透明度,
    this.alwaysIncludeSemantics = false,
    Widget? child,
  })

opacity:设置透明度,当设置为0时,子控件不可见,在屏幕上不占用空间,但是仍然在Widget Tree中.
当opacity的值不在[0,1]之间,子控件先会绘制到缓冲区,然后在绘制到屏幕.
alwaysIncludeSemantics:当该值设置为true,并且opacity=0时,虽然子控件不可见,但是在屏幕上会占用子控件大小的空间.

当[Image]、[Color]使用Opacity设置透明度在[0,1]之间时,使用Image\Color更高效.

	//方案一
    Opacity(
      opacity: 0.5,
      child: Container(
        color: Color.fromRGBO(0, 0, 255, 1),
        width: 60,
        height: 60,
      ),
    )
    //方案二 更高效,切效果和方案一一样
    Container(
      color: Color.fromRGBO(0, 0, 255, 0.5),
      width: 60,
      height: 60,
    )