[移动开发]Flutter 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,
    )
    

Offstage Widget

可以控制子控件是否显示

构造函数

const Offstage({ Key? key, this.offstage = true, Widget? child })

• offstage: 当offstage=false,子控件(child)可见;
  当offstaged=true是,子控件不可见;子控件在Widget Tree,不进行绘制,不会命中测试;也不占用空间;子控件仍处于active状态;子控件动画仍在进行,所以子控件有动画时,需要手动停止掉动画;

Offstage(
      offstage: false,
      child: GestureDetector(
        onTap: () {
          print("**** on pressed ***");
        },
        child: Container(
          width: 60,
          height: 60,
          color: Colors.deepPurple,
        ),
      ),
    )

Visibility Widget

控制子控件是否可见

构造函数

  const Visibility({
    Key? key,
    required this.child,
    this.replacement = const SizedBox.shrink(),
    this.visible = true,
    this.maintainState = false,
    this.maintainAnimation = false,
    this.maintainSize = false,
    this.maintainSemantics = false,
    this.maintainInteractivity = false,
  })

• visible:,true:子控件可见,绘制到屏幕上; false时,子控件不可见,并且不在屏幕上占用一定的空间,此时会使用replacement替换child,实际绘制的Widget就是replacement,默认replasement时宽高为0的SizedBox.
• maintainState:当visible=false时,是否保存子控件的状态.当为true时,子空间会在Widget Tree中存在,不占用屏幕 的空间,其实际在子child增加了Offstage等一些父控件.
• maintainSize:是否为子控件所在的位置保留空间.当maintainSize=true[maintainState、maintainAnimation]时,[]子控件不可见,但是其所在位置占用的空间存在.在Visibility和子控件之间增加了Opacity.

其他隐藏控件的方式

当一个控件在状态改变时,不需要进行绘制,可以一动态的方式决定是否将控件添加到Widget Tree中.
比如当一个控件在需要时,才添加到控件,否则不添加;

///按需将控件添加到Widget Tree
@override
  Widget build(BuildContext context) {
    Widget child1 = Container(
      width: 100,
      height: 100,
      color: Colors.green,
    );
    Widget child2 = Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    );
    return Row(
      children: [
        if(newer)
          child2,
        newer ? child2 : child1,
      ],
    );
  }