Flutter Widgets 之 Opacity 和AnimatedOpacity

老

孟

一个

有态度

的程序员

Flutter中移除一个控件很是容易，只须要在从新建立中移除便可，若是想要移除控件同时它的位置依然保留，相似于Android中View的invisible，好比Row中有3个颜色块，分别为一、二、3，代码以下：

Row(
 mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( height: 80, width: 80, color: Colors.red, alignment: Alignment.center, child: Text('1',style: TextStyle(color: Colors.white),), ), Container( height: 80, width: 80, color: Colors.green, alignment: Alignment.center, child: Text('2',style: TextStyle(color: Colors.white),), ), Container( height: 80, width: 80, color: Colors.blue, alignment: Alignment.center, child: Text('3',style: TextStyle(color: Colors.white),), ), ], )

效果以下：

这时想要移除2，同时还保留2的位置，可使用Opacity控件实现，代码以下：

Opacity(
 opacity: 0.0, child: Container( height: 80, width: 80, color: Colors.green, alignment: Alignment.center, child: Text('2',style: TextStyle(color: Colors.white),), ), )

效果以下：

使用Opacity控件和另外一个控件层叠在一块儿，将会出现“蒙层效果”：

Stack(
 children: <Widget>[ Image.network( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg', ), Positioned.fill( child: Opacity( opacity: 0.5, child: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.white, Colors.blue], begin: Alignment.bottomCenter, end: Alignment.topCenter), ), ), ), ), ], )

效果以下：

甚至咱们可使用AnimatedOpacity控件实现动画效果:

bool click = false;
AnimatedOpacity( onEnd: () { setState(() { click = !click; }); }, duration: Duration(seconds: 3), opacity: click ? 0.2 : 0.8, child: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.white, Colors.grey], ), ), ), )

动画效果：

更多相关阅读：

• AnimatedList 介绍及使用

• Flutter之SliverAppBar

长

按

解

锁

关注咱们

得到更多精彩内容

戳原文，查看Flutter系列总览

本文分享自微信公众号 - 老孟Flutter（lao_meng_qd）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。