在移動端開發中，經常會有一些動畫交互，比如淡入淡出,效果如圖：

因為官方封裝好了AnimatedOpacity Widget，開箱即用，所以我們用起來很方便，代碼量很少，做少量配置即可，所以，全部代碼如下：

import 'package:flutter/material.dart';class TabPage3 extends StatefulWidget {@overridecreateState() => new LogoFadeState(); } class LogoFadeState extends State<TabPage3> {// 初始opacityLevel為1.0為可見狀態，為0.0時不可見double opacityLevel = 1.0;_changeOpacity() {//調用setState（） 根據opacityLevel當前的值重繪ui// 當用戶點擊按鈕時opacityLevel的值會（1.0=>0.0=>1.0=>0.0 ...）切換// 所以AnimatedOpacity 會根據opacity傳入的值(opacityLevel)進行重繪 WidgetsetState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);}@overrideWidget build(BuildContext context) {return new Column(//一個Column布局，主軸為垂直方向，起點在上沿。mainAxisAlignment: MainAxisAlignment.spaceAround,//子組件在主軸上均勻分布在容器內，兩邊留有一半的間隔空間。children: [new AnimatedOpacity(// 使用一個AnimatedOpacity Widgetopacity: opacityLevel,duration: new Duration(seconds: 1),//過渡時間：1child:new Container(padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//內邊距child:new Text("和React Native一樣，Flutter也提供響應式的視圖，Flutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯。Dart是用預編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，而不需要通過執行上下文切換的JavaScript橋接器。編譯為原生代碼也可以加快應用程序的啟動時間。實際上，Flutter是唯一提供響應式視圖而不需要JavaScript橋接器的移動SDK，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西，即它是如何實現UI組件的？") ,)),new RaisedButton(child:new Container(child: new Text("點我試試"),) ,onPressed: _changeOpacity,//添加點擊事件),],);} }復制代碼

flutter官方給我們封裝了很多很多常用的開箱即用的控件，為開發帶來了極大的便利。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的浅尝flutter中的动画（淡入淡出）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。