简介
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;
});
}),