Opacity Widget
2019-01-10 本文已影响9人
imuzi
一般情况下,要移除界面中的某和控件只需要将控件代码删除即可,但是如果希望控件隐藏,但是控件之间占的位置依然保留,就需要使用Opacity来进行包裹.
并且还可以使用AnimatedOpacity添加动画,只需要加一个时长,在重新渲染时就会有一个渲染动画.是不是很酷呢.
import 'package:flutter/material.dart';
class GoogleOpacity extends StatefulWidget {
@override
GoogleOpacityState createState() => new GoogleOpacityState();
}
class GoogleOpacityState extends State<GoogleOpacity> {
double _opacity = 1.0;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Column(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
],
),
Column(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
Opacity(
opacity: 0.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
),
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
],
),
Stack(
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
child: Image.network(
'http://img2.imgtn.bdimg.com/it/u=2755523882,2215399258&fm=200&gp=0.jpg'),
),
AnimatedOpacity(
duration: Duration(seconds: 1),
opacity: _opacity,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
),
),
],
),
],
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
Future.delayed(Duration(seconds: 1), (){
setState(() {
_opacity = 0.0;
});
});
}
}