Flutter 使用fluro的轉場動畫進行頁面切換

Posted on by

在 fluro 中，定義路由處理器 Handler 時可以指定該頁面的默認轉場形式，或者在使用 navigateTo 方法是可以設置頁面跳轉transition參數來設定個性化的轉場形式。本篇演示瞭fluro 內置的轉場動畫，效果如下圖所示。

轉場形式

fluro 的轉場形式通過 TransitionType枚舉定義，如下所示：

enum TransitionType {
  native, //原生形式，和原生的保持一致，默認
  nativeModal, //原生模態跳轉
  inFromLeft,  //從左滑入
  inFromTop,   //從頂部滑入
  inFromRight, //從右滑入
  inFromBottom,//從底部滑入
  fadeIn,      //漸現
  custom,      //自定義，需要配合 transitionBuilder 使用
  material,    //安卓風格跳轉
  materialFullScreenDialog, //安卓風格全屏對話框（左上角帶有關閉按鈕）
  cupertino,   //iOS 風格跳轉
  cupertinoFullScreenDialog,//iOS風格全屏對話框（左上角帶有關閉按鈕）
  none,				 //無轉場動畫
}

設定頁面默認轉場方式

在定義 Handler 時，可以指定轉場動畫的 transition，如下所示：

//...
router.define(transitionPath,
  handler: transitionHandler,
  transitionType: TransitionType.inFromBottom);
//...

這個時候，如果在 navigateTo 方法沒有指定轉場動畫，則會使用路由預先定義的方式進行轉場。

跳轉時指定轉場方式

FluroRouter 的 navigateTo 方法可以顯示指定 轉場動畫類型，隻需要在 transition 參數指定對應的枚舉值即可，示例代碼如下：

RouterManager.router.navigateTo(
  context, RouterManager.transitionPath,
  transition: TransitionType.inFromRight);

如果想要控制轉場動畫的時間，可以設置transitionDuration參數，transitionDuration是一個 Duration 對象。考慮用戶等待時間和體驗，一般轉場動畫建議在200-300毫秒之間。示例代碼如下：

RouterManager.router.navigateTo(
  context, RouterManager.transitionPath,
  transition: TransitionType.fadeIn,
  transitionDuration: Duration(milliseconds: 1000));

總結

可以看到，fluro 自身提供的預設動畫已經能夠滿足絕大多數場景的使用瞭，建議是如果頁面的出現形式是固定的，可以在定義路由時指定，從而避免每一處跳轉都需要設定 transition 參數。如果還需要其他轉場動畫，可以使用 transitionBuilder 來構建，下一篇我們介紹如何構建自定義的轉場動畫。

以上就是Flutter 使用fluro的轉場動畫進行頁面切換的詳細內容，更多關於Flutter fluro轉場動畫的資料請關註WalkonNet其它相關文章！

推薦閱讀：