Flutter Opacity 使用介绍

2,447 阅读1分钟

Opacity class介绍 Opacity class是个widget控件,它可以改变子widget的透明度。这个类会先把子widget绘制到一个中间缓冲区里,然后做透明处理最后绘制到屏幕中。 当opacity的值为0时完全透明,不会进行绘制,控件不显示,当opacity的值为1时不透明,控件会被立马绘制,不会被先绘制到临时缓冲区里。当opacity值是0-1中间的值时,开销是比较昂贵的,因为控件需要先在中间缓冲区里绘制一遍。

Opacity class的使用 下面这个例子,当_visible的值为true时将会显示Text控件,false的时候会隐藏Text控件

Opacity( opacity: _visible ? 1.0 : 0.0, child: const Text('Now you see me, now you don't!'), )

通过这种方式去隐藏显示widget控件比把widget控件从控件树里面移除要高效多了。

Opacity的动画性能问题 直接在Opacity控件上添加动画效果这样做效率是很低的,因为动画的每一帧效果都会导致Opacity的子控件树重建,这时候可以考虑使用AnimatedOpacity来代替。

设置图片透明的一些问题 如果是单张图片或者是纯色的背景,需要设置透明度时,考虑直接使用他们的透明通道比使用Opacity控件要高效得多,譬如Container(color: Color.fromRGBO(255, 0, 0, 0.5)) 这行代码的效率要比Opacity(opacity: 0.5, child: Container(color: Colors.red))高效。 下面这个例子是不使用Opacity的情况下,显示一张图片,并且设置透明度为0.5