Opacity Widget

作者: imuzi | 来源:发表于2019-01-10 21:19 被阅读9次

    一般情况下,要移除界面中的某和控件只需要将控件代码删除即可,但是如果希望控件隐藏,但是控件之间占的位置依然保留,就需要使用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;
          });
        });
      }
    }
    

    我的博客
    代码github

    相关文章

      网友评论

        本文标题:Opacity Widget

        本文链接:https://www.haomeiwen.com/subject/osezrqtx.html