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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。