Flutter之改变Widget透明度

1,640 阅读1分钟

简介

Opacity:改变child widget的透明度.

Opacity(
  opacity: ...,
  child: Text("呵呵"),
)

opacity属性的值的范围在0.0到1.0之间。0代表完全透明,1代表完全不透明。 有时候也可以使用Opacity来实现Widget的隐藏与显示。

示例

class TestUi extends StatefulWidget {
  const TestUi({Key key}) : super(key: key);

  @override
  _TestUiState createState() => _TestUiState();
}

class _TestUiState extends State<TestUi> {
  /// 透明度从0.0到1.0
  var _opacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('改变透明度',style: TextStyle(fontSize: )),
      ),
      body: Container(
        child: Column(
          children: [
            Opacity(
              opacity: _opacity,
              child: Center(child: Text("呵呵")),
            ),
            Slider(
                value: _opacity,
                min: 0.0,
                max: 1.0,
                onChanged: (value) {
                  /// 通过滑块来控制透明度
                  setState(() {
                    _opacity = value;
                  });
                }),
          ],
        ),
      ),
    );
  }
}

性能建议

官方给出的建议是不到万不得已,就不要用Opacity。 因为Opacity会将内容绘制到离屏缓冲区可能会触发渲染目标的切换。在很早之前的设备上,gpu会处理的特别慢。

只改变颜色透明度

如果只是想改变Image或者color的透明度,完全没必要使用Opacity。直接使用RGB改变透明度即可。

示例

Container(
  /// 最后一个参数代表透明度
  color: Color.fromRGBO(255, 22, 33, _opacity),
  child: Text("改变背景色的透明度"),
),
Slider(
    value: _opacity,
    min: 0.0,
    max: 1.0,
    onChanged: (value) {
      setState(() {
        _opacity = value;
      });
    }),

AnimatedOpacity

如果使用Opacity时,需要频繁改动透明度,建议使用AnimatedOpacity,性能更好。 每次透明度改变时,都会有一个过渡效果,不会感觉到改变的很生硬。

AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(milliseconds: 500),
  child: Center(
      child: Text(
    "Hello,world!",
    style: TextStyle(fontSize: 30),
  )),
),
Slider(
    value: _opacity,
    min: 0.0,
    max: 1.0,
    onChanged: (value) {
      setState(() {
        _opacity = value;
      });
    }),

20210730_151659.gif