1.概要

当我们要移除一个Widget，如图所示中间蓝色的Widget时，

image.png

可以直接在代码里面删掉对应Widget代码即可。但是，当我们把代码删除后，剩下的Widget会挨到一起，如下所示：

image.png

如果我们有个需求，只是隐藏掉中间蓝色的Widget，并且该Widget的位置还要给他留着，那么，我们可以通过Opacity实现该需求。

Opacity是一个可以设置其子Widget透明度的Widget，当设置其透明度为0时，子Widget就会隐藏起来，并且位置还会被占着。

image.png

2.源码

Opacity({
    Key key,
    // 透明度，必须设置，值为0.0-1.0之间的小数。0完全透明，1完全不透明
    @required this.opacity,
    // 是否始终包含子级的语义信息，当我们在动画执行过程中，子Widget可能隐藏时，该属性会很有用。
    this.alwaysIncludeSemantics = false,
    // 子Widget
    Widget child,
  })

3.示例

Opacity(
          opacity: 0.5,
          child: Container(
            color: Colors.cyan,
          width: 200,
          height: 200,
  ),
        ),

image.png

4.扩展

我们可以通过AnimatedOpacity实现透明度渐变的隐式动画。

AnimatedOpacity({
    Key key,
    // 子widget
    this.child,
    // 透明度
    @required this.opacity,
    // 动画变化方式
    Curve curve = Curves.linear,
    // 动画执行时间
    @required Duration duration,
    // 动画执行完毕回调
    VoidCallback onEnd,
    // 是否始终包含子级的语义信息
    this.alwaysIncludeSemantics = false,
  })