Flutter開發之路由與導航的實現

發布時間:2019-12-14 10:16 來源:互聯網 當前欄目:網站服務器

如果說構成視圖元素的基本單位是組件,那么構成應用程序的基本單位就是頁面。對于擁有多個頁面的應用程序而言,如何從一個頁面平滑地過渡到另一個頁面,是技術框架需要考慮的問題。

在前端開發中,可以使用路由框架來統一管理頁面及它們之間的跳轉。在Android中路由指的是一個Activity,在iOS中指的是一個ViewController,可以通過startActivity或pushViewController來打開一個新的路由。在Flutter中,路由的管理和導航借鑒了前端和客戶端的設計思路,需要使用Route和Navigator來進行統一管理。

其中,Route是頁面的抽象,主要負責創建界面、接收參數以及響應導航器Navigator的打開與關閉。而Navigator則用于維護路由棧管理,Route打開即入棧,Route關閉即出棧,當然還可以替換棧內的某一個Route。作為官方提供的路由管理組件,Navigator提供了一系列方法來管理路由棧,其中最常用的兩個方法是push()和pop(),它們的含義如下。

push():將給定的路由入棧,返回值是一個Future對象,用以接收路由出棧時的返回數據。 pop():將棧頂路由出棧,返回結果為頁面關閉時返回給上一個頁面的數據。

除了push()和pop()方法外,Navigator還提供了很多其它實用的方法,如replace()、removeRoute()和popUntil()等,可以根據使用場景合理的選取。

根據是否需要提前注冊頁面標識符,Flutter中的路由管理可以分為基本路由和命名路由兩種。

基本路由:無需提前注冊,在頁面切換時需要手動構造頁面的實例。 命名路由:需要提前注冊頁面標識符,在頁面切換時通過標識符直接打開新的路由。

下面就讓我們重點來看一下Flutter中的路由管理的基本路由和命名路由等相關知識。

基本路由

在Flutter開發中,基本路由的使用方式和原生Android、iOS打開新頁面的方式非常類似。要打開一個新的頁面,只需要創建一個MaterialPageRoute對象實例,然后調用Navigator.push()方法將新頁面壓到路由堆棧的頂部即可,如果要返回上一個頁面,則可以調用Navigator.pop()方法。

其中,MaterialPageRoute是一種路由模板,定義了路由創建以及路由切換過渡動畫的相關配置,該配置可以根據不同的平臺實現與平臺頁面切換動畫風格一致的路由切換動畫。下面是使用Navigator實現頁面跳轉的示例,代碼如下。

class FirstPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
  title: Text('第一個頁面'),
  ),
  body: Center(
  child: RaisedButton(
   child: Text('跳轉到第二個頁面'),
   onPressed: () => Navigator.push(context,
    MaterialPageRoute(builder: (context) => SecondPage()))),
  ),
 );
 }
}

class SecondPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
  title: Text('第二個頁面'),
  ),
  body: Center(
  child: RaisedButton(
   child: Text('返回上一個頁面'),
 onPressed: () => Navigator.pop(context)),
  ),
 );
 }
}

在上面的示例中,我們創建了兩個頁面,每個頁面都包含一個按鈕。當點擊第一個頁面上的按鈕時將導航到第二個頁面,點擊第二個頁面上的按鈕將返回第一個頁面。運行上面的代碼,效果如下圖所示。

可以發現,跳轉頁面使用的是Navigator.push()方法,該方法可以將一個新的路由添加到由Navigator管理的路由對象的棧頂。而創建新的路由對象使用的是MaterialPageRoute,MaterialPageRoute是PageRoute的子類,定義了路由創建及切換時過渡動畫的相關接口及屬性,并且自帶頁面切換動畫,Android平臺頁面進入動畫是向上滑動并淡出,退出是相反,iOS平臺頁面進入動畫是從右側滑入,退出則相反。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、