優美的應用體驗 來自于細節的處理，更源自于碼農的自我要求與努力，當然也需要碼農年輕靈活的思維。

---

本文章實現的Demo效果，如下圖所示：

class HeroHomePage extends StatefulWidget { @override _TestPageState createState() => _TestPageState();}class _TestPageState extends State<HeroHomePage> { @override Widget build(BuildContext context) { return Scaffold( //背景 backgroundColor: Colors.grey[200], //標題 appBar: AppBar( title: Text("每日分享"), ), //頁面主體 body: buildBodyWidget(), ); } ... }

頁面的主體就是這里顯示的圖文，使用Row來將圖片與文本區域左右排列，代碼如下：

Widget buildBodyWidget() { //水波紋點擊事件監聽 return InkWell( //手指點擊抬起時的回調 onTap: () { //打開新的頁面 openPageFunction(); }, child: Container( padding: EdgeInsets.all(10), color: Colors.white, //線性布局左右排列 child: Row( //主軸方向開始對齊 在這里是左對齊 mainAxisAlignment: MainAxisAlignment.start, //交叉軸上開始對齊 在這里是頂部對齊 crossAxisAlignment: CrossAxisAlignment.start, children: [ //左側的圖片 buildLeftImage(), //右側的文本區域 buildRightTextArea()], ), ), );??}

2 顯示圖片的構建

左側的圖片區域 需要 使用 Hero 來包裹，因為這里就是Hero動畫觸發的效果，代碼如下：

///左側的圖片區域 Container buildLeftImage() { return Container( margin: EdgeInsets.only(right: 12), child: Hero( tag: "test", child: Image.asset( "images/banner3.webp", width: 96, fit: BoxFit.fill, height: 96, ), ), );??}

3 右側的文本區域

///右側的文本區域 Expanded buildRightTextArea() { return Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( "優美的應用", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 16), ), Text( "優美的應用體驗 來自于細節的處理，更源自于碼農的自我要求與努力，當然也需要碼農年輕靈活的思維。", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 14, color: Colors.black38), ) ], ), );??}

4 自定義透明過度動畫路由

Hero達成兩個頁面之間共享元素的連動效果，但是頁面的切換效果造成礙眼的體驗，配合一個透明過度，達成舒適的體驗，代碼如下：

///自定義路由動畫 void openPageFunction() { Navigator.of(context).push( PageRouteBuilder( pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) { //目標頁面 return DetailsPage(); }, //打開新的頁面用時 transitionDuration: Duration(milliseconds: 1800), //關半頁巖用時 reverseTransitionDuration: Duration(milliseconds: 1800), //過渡動畫構建 transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ) { //漸變過渡動畫 return FadeTransition( // 透明度從 0.0-1.0 opacity: Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: animation, //動畫曲線規則，這里使用的是先快后慢 curve: Curves.fastOutSlowIn, ), ), child: child, ); }, ), );??}

5 最后就是點擊圖文信息打開的詳情頁面

class DetailsPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( //背景透明 backgroundColor: Colors.white, appBar: AppBar( title: Text("精彩人生"), ), body: buildCurrentWidget(context), ); } Widget buildCurrentWidget(BuildContext context) { return Container( color: Colors.white, padding: EdgeInsets.all(8), margin: EdgeInsets.all(10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ //圖片區域 buildHero(context), SizedBox( width: 22, ), //文字區域 buildTextContainer(), ], ), ); }}

頁面分為兩部分，第一部分的圖片，使用Hero過渡 ，需要注意的是 目標 Hero 的直接子類必須是一個 Material包裹，代碼如下：

///圖片區域 Hero buildHero(BuildContext context) { return Hero( tag: "test", child: Material( color: Colors.blue, child: InkWell( onTap: () { Navigator.of(context).pop(); }, child: Image.asset( "images/banner3.webp", fit: BoxFit.fill, ), ), ), );??}

第二部分就是一個普通的文本了

Container buildTextContainer() { return Container( child: Text( "優美的應用體驗 來自于細節的處理，更源自于碼農的自我要求與努力", softWrap: true, overflow: TextOverflow.ellipsis, maxLines: 3, style: TextStyle(fontSize: 16), ), ); }

點擊原文可獲取源碼。

總結

以上是生活随笔為你收集整理的vue 页面切换动画_Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理...的全部內容，希望文章能夠幫你解決所遇到的問題。

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