詳解Flutter的路由導航

更新時間：2021年04月06日 08:51:21 作者：移動的小太陽

這篇文章主要介紹了Flutter的路由導航的相關資料，幫助大家更好的理解和學習使用Flutter，感興趣的朋友可以了解下

Flutter 的路由導航

路由管理或導航管理：從一個頁面平滑地過渡到另一個頁面，我們需要有一個統(tǒng)一的機制來管理頁面之間的跳轉。在原生的Android 開發(fā)，是通過startActivity或startActivityForResult 來完成頁面的跳轉的，在Flutter 中如何實現呢？

在 Flutter 中，頁面之間的跳轉是通過 Route 和 Navigator 來管理的：

Route 是頁面的抽象，主要負責創(chuàng)建對應的界面，接收參數，響應 Navigator 打開和關閉；
而 Navigator 則會維護一個路由棧管理 Route，Route 打開即入棧，Route 關閉即出棧，還可以直接替換棧內的某一個 Route。

在Flutter 中根據是否提前注冊，可以分為基本路由和命名路由。

基本路由：沒有提前注冊。

命名路由：需要在 APP 的入口進行注冊。

基本路由使用方式相對簡單靈活，適用于應用中頁面不多的場景。而在應用中頁面比較多的情況下，再使用基本路由方式，那么每次跳轉到一個新的頁面，我們都要手動創(chuàng)建 MaterialPageRoute 實例，初始化頁面，然后調用 push 方法打開它，還是比較麻煩的。

應用程序 MaterialApp 提供一個頁面名稱映射規(guī)則，即路由表 routes，路由表實際上是一個 Map，其中 key 值對應頁面名字，而 value 值則是一個 WidgetBuilder 回調函數，我們需要在這個函數中創(chuàng)建對應的頁面。而一旦在路由表中定義好了頁面名字，我們就可以使用 Navigator.pushNamed 來打開頁面了。

需要注意的是，要在進入APP入口的 MaterialApp 注冊路由才有用。

使用基本路由方式打開 Page1：
 Navigator.push(
        context, MaterialPageRoute(builder: (context) => Page1())),
        
 命名路由：
 void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
   // 注冊路由
    "route_Page1": (context) => Page1(),
    ...
   },
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}
// 使用命名路由方式打開 Page1：
Navigator.pushNamed(context, "route_Page1"),

默認路由

使用命名路由，該命名不在路由表中就會報錯，這時候可以通過設置默認路由，當找不到的時候，進到到一個指定的頁面。只需要在 MaterialApp 中配置：onUnknownRoute 即可

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
    "route_Page1": (context) => Page1(),
    ......
   },
   // 路由發(fā)生錯誤，進入到該指定頁面
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}

頁面跳轉并傳遞參數

通過 Navigator.pushNamed 傳入 arguments 屬性；然后在打開的頁面通過 ModalRoute.of(context).settings.arguments來獲取參數；參數的回傳通過 Navigator.pop 方法

1. 傳遞參數：
 Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
 2. 接收參數：
 
class Page3 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.red,
   appBar: AppBar(
    title: Text("傳遞參數"),
   ),
   body: Text("得到的參數是:$msg"),
  );
 }
}
3， 參數的回傳
class Page4 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.yellow,
   appBar: AppBar(
    title: Text("返回參數"),
   ),
   body: Text("得到的參數是:$msg"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.backspace),
    onPressed: () => Navigator.pop(context, "hi"),
   ),
  );
 }
}
4. 回傳參數的接收：通過then方法
 Navigator.pushNamed(context, "route_Page4", arguments: "hello")
          .then((value) => print("返回的參數是$value")),