在移動(dòng)端開發(fā)中几晤，經(jīng)常會(huì)有一些動(dòng)畫交互，比如淡入淡出,效果如圖：
淡入淡出.gif
因?yàn)楣俜椒庋b好了AnimatedOpacity Widget缩筛，開箱即用消略，所以我們用起來很方便堡称，代碼量很少瞎抛，做少量配置即可，所以却紧，全部代碼如下：
import 'package:flutter/material.dart';
class TabPage3 extends StatefulWidget {
@override
createState() => new LogoFadeState();
}
class LogoFadeState extends State<TabPage3> {
// 初始o(jì)pacityLevel為1.0為可見狀態(tài)桐臊，為0.0時(shí)不可見
double opacityLevel = 1.0;
_changeOpacity() {
//調(diào)用setState（） 根據(jù)opacityLevel當(dāng)前的值重繪ui
// 當(dāng)用戶點(diǎn)擊按鈕時(shí)opacityLevel的值會(huì)（1.0=>0.0=>1.0=>0.0 ...）切換
// 所以AnimatedOpacity 會(huì)根據(jù)opacity傳入的值(opacityLevel)進(jìn)行重繪 Widget
setState(
() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0
);
}
@override
Widget build(BuildContext context) {
return new Column(//一個(gè)Column布局，主軸為垂直方向晓殊，起點(diǎn)在上沿断凶。
mainAxisAlignment: MainAxisAlignment.spaceAround,//子組件在主軸上均勻分布在容器內(nèi)，兩邊留有一半的間隔空間巫俺。
children: [
new AnimatedOpacity(// 使用一個(gè)AnimatedOpacity Widget
opacity: opacityLevel,
duration: new Duration(seconds: 1),//過渡時(shí)間：1
child:new Container(
padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//內(nèi)邊距
child:new Text("和React Native一樣认烁，F(xiàn)lutter也提供響應(yīng)式的視圖，F(xiàn)lutter采用不同的方法避免由JavaScript橋接器引起的性能問題介汹，即用名為Dart的程序語言來編譯却嗡。Dart是用預(yù)編譯的方式編譯多個(gè)平臺(tái)的原生代碼，這允許Flutter直接與平臺(tái)通信嘹承，而不需要通過執(zhí)行上下文切換的JavaScript橋接器窗价。編譯為原生代碼也可以加快應(yīng)用程序的啟動(dòng)時(shí)間。實(shí)際上叹卷，F(xiàn)lutter是唯一提供響應(yīng)式視圖而不需要JavaScript橋接器的移動(dòng)SDK撼港，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西骤竹，即它是如何實(shí)現(xiàn)UI組件的帝牡？") ,)
),
new RaisedButton(
child:new Container(
child: new Text("點(diǎn)我試試"),
) ,
onPressed: _changeOpacity,//添加點(diǎn)擊事件
),
],
);
}
}
flutter官方給我們封裝了很多很多常用的開箱即用的控件，為開發(fā)帶來了極大的便利蒙揣。
