快捷導(dǎo)航

Flutter 使用fluro的轉(zhuǎn)場(chǎng)動(dòng)畫進(jìn)行頁面切換

更新時(shí)間：2021年06月22日 10:24:37 作者：島上碼農(nóng)

在實(shí)際應(yīng)用中，我們常常會(huì)對(duì)不同的頁面采取不同的轉(zhuǎn)場(chǎng)動(dòng)畫，以提高頁面切換過程中的用戶體驗(yàn)。例如，微信的掃碼后在手機(jī)上確認(rèn)登錄頁面就是從底部彈出的，而大部分頁面的跳轉(zhuǎn)都是從右向左滑入。通過這種形式區(qū)分不同的轉(zhuǎn)場(chǎng)場(chǎng)景，從而給用戶更多的趣味性以提高用戶體驗(yàn)。

在 fluro 中，定義路由處理器 Handler 時(shí)可以指定該頁面的默認(rèn)轉(zhuǎn)場(chǎng)形式，或者在使用 navigateTo 方法是可以設(shè)置頁面跳轉(zhuǎn)transition參數(shù)來設(shè)定個(gè)性化的轉(zhuǎn)場(chǎng)形式。本篇演示了fluro 內(nèi)置的轉(zhuǎn)場(chǎng)動(dòng)畫，效果如下圖所示。

轉(zhuǎn)場(chǎng)形式

fluro 的轉(zhuǎn)場(chǎng)形式通過 TransitionType枚舉定義，如下所示：

enum TransitionType {
  native, //原生形式，和原生的保持一致，默認(rèn)
  nativeModal, //原生模態(tài)跳轉(zhuǎn)
  inFromLeft,  //從左滑入
  inFromTop,   //從頂部滑入
  inFromRight, //從右滑入
  inFromBottom,//從底部滑入
  fadeIn,      //漸現(xiàn)
  custom,      //自定義，需要配合 transitionBuilder 使用
  material,    //安卓風(fēng)格跳轉(zhuǎn)
  materialFullScreenDialog, //安卓風(fēng)格全屏對(duì)話框（左上角帶有關(guān)閉按鈕）
  cupertino,   //iOS 風(fēng)格跳轉(zhuǎn)
  cupertinoFullScreenDialog,//iOS風(fēng)格全屏對(duì)話框（左上角帶有關(guān)閉按鈕）
  none,				 //無轉(zhuǎn)場(chǎng)動(dòng)畫
}

設(shè)定頁面默認(rèn)轉(zhuǎn)場(chǎng)方式

在定義 Handler 時(shí)，可以指定轉(zhuǎn)場(chǎng)動(dòng)畫的 transition，如下所示：

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

這個(gè)時(shí)候，如果在 navigateTo 方法沒有指定轉(zhuǎn)場(chǎng)動(dòng)畫，則會(huì)使用路由預(yù)先定義的方式進(jìn)行轉(zhuǎn)場(chǎng)。

跳轉(zhuǎn)時(shí)指定轉(zhuǎn)場(chǎng)方式

FluroRouter 的 navigateTo 方法可以顯示指定轉(zhuǎn)場(chǎng)動(dòng)畫類型，只需要在 transition 參數(shù)指定對(duì)應(yīng)的枚舉值即可，示例代碼如下：

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

如果想要控制轉(zhuǎn)場(chǎng)動(dòng)畫的時(shí)間，可以設(shè)置transitionDuration參數(shù)，transitionDuration是一個(gè) Duration 對(duì)象。考慮用戶等待時(shí)間和體驗(yàn)，一般轉(zhuǎn)場(chǎng)動(dòng)畫建議在200-300毫秒之間。示例代碼如下：

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

總結(jié)

可以看到，fluro 自身提供的預(yù)設(shè)動(dòng)畫已經(jīng)能夠滿足絕大多數(shù)場(chǎng)景的使用了，建議是如果頁面的出現(xiàn)形式是固定的，可以在定義路由時(shí)指定，從而避免每一處跳轉(zhuǎn)都需要設(shè)定 transition 參數(shù)。如果還需要其他轉(zhuǎn)場(chǎng)動(dòng)畫，可以使用 transitionBuilder 來構(gòu)建，下一篇我們介紹如何構(gòu)建自定義的轉(zhuǎn)場(chǎng)動(dòng)畫。

以上就是Flutter 使用fluro的轉(zhuǎn)場(chǎng)動(dòng)畫進(jìn)行頁面切換的詳細(xì)內(nèi)容，更多關(guān)于Flutter fluro轉(zhuǎn)場(chǎng)動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: