簡介
一個APP如果沒有頁面跳轉那麼是沒有靈魂的,頁面跳轉的一個常用說法就是Navigator,flutter作爲一個最爲優秀的前端框架,Navigator肯定是必不可少的,那麼在flutter中如何使用Navigator呢?
一起來看看吧。
flutter中的Navigator
Navigator是flutter中用來導航的關鍵組件。我們先來看下Navigator的定義:
class Navigator extends StatefulWidget
Navigator首先是一個StatefulWidget,爲什麼是一個有狀態的widget呢?這是因爲Navigator需要在內部報錯一些路由的信息,事實上Navigator中保存的就是一個棧結構的歷史訪問過的widget。
我們來看下它的構造函數,然後理解一下它內部的各個屬性的含義:
const Navigator({
Key? key,
this.pages = const <Page<dynamic>>[],
this.onPopPage,
this.initialRoute,
this.onGenerateInitialRoutes = Navigator.defaultGenerateInitialRoutes,
this.onGenerateRoute,
this.onUnknownRoute,
this.transitionDelegate = const DefaultTransitionDelegate<dynamic>(),
this.reportsRouteUpdateToEngine = false,
this.observers = const <NavigatorObserver>[],
this.restorationScopeId,
})
在這些屬性中onGenerateRoute,pages,onGenerateInitialRoutes,transitionDelegate和observers這幾個參數必須是非null。
首先是pages,pages是一個List對象:
final List<Page<dynamic>> pages;
這裏的pages存儲的就是歷史訪問信息,Navigator的所有操作都是圍繞着pages來的。
如果我們想在page切換的過程中添加一些動畫,那麼就可以用到transitionDelegate,如果我們要彈出一些page的話,那麼可能會希望用到onPopPage callback方法來對pages list進行一些特殊處理。
另外initialRoute是需要第一個展示的route,Navigator還提供了兩個方法用來在生成Route的時候進行觸發:onGenerateRoute,onGenerateInitialRoutes。
Navigator提供了一系列的pop和push方法用來對路由進行跳轉。
下面我們將會通過一個具體的例子來對Navigator進行詳細的講解。
Navigator的使用
在這個例子中我們會使用Navigator的兩個最基本的方法push和pop來進行路由的切換。
先來看下push方法的定義:
static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
push是一個靜態方法,這意味着我們可以通過使用Navigator.push來進行調用。
push方法需要傳入兩個參數,分別是context和route。
爲什麼會有context呢?這是因爲Navigator是和context相關聯的,不同的context可以有不同的Navigator。
Route就是要導入的路由。
可以看到方法內部實際上是調用了Navigator.of方法,最後返回的是一個Future對象。
我們的例子是兩個圖片widget的簡單切換。點擊一個圖像widget會調整到另外一個圖像widget上,在另外一個圖像widget上點擊,會跳轉回前一個widget。
我們可以這樣定義第一個widget:
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
),
body: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return const SecondPage();
}));
},
child: Image.network(
'http://www.flydean.com/wp-content/uploads/2019/06/cropped-head5.jpg',
),
),
);
}
這裏的body我們放置了一個Image對象,然後在它的點擊onTap操作時,調用了Navigator.push方法。
因爲push方法需要一個Route對象,這裏我們使用了最簡單的MaterialPageRoute,然後返回第二個圖像widget對象。
再來看看第二個圖像Widget的定義:
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Image.network(
'https://img-blog.csdnimg.cn/bb5b19255ab6406cb6bdc467ecc40462.webp',
),
),
),
);
}
}
和第一個圖像widget一樣,它的body也是一個image,然後在點擊ontap方法中跳回到第一個圖片widget去。
這裏的跳回方法使用的是 Navigator.pop,我們來看下pop方法的實現:
static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
Navigator.of(context).pop<T>(result);
}
和push一樣,pop方法也接收一個context對象,但是它還有一個可選的result參數。最後實際調用的是Navigator.of(context).pop方法。
result是做什麼的呢?
還記得push方法嗎?push方法會返回一個Future,也就是說push方法是有結果的,這個結果是從哪裏來的呢?這個結果就是pop時候傳進來的。
當我們調用push方法的時候,就會把這個result放在Future中返回。
運行上面的代碼,首先我們得到第一個頁面的widget:
點擊就會調整到第二個圖片widget:
再次點擊就會跳回第一個頁面,非常的神奇。
總結
Navigator是每個flutter app都少不了的組件,希望大家能夠掌握。