詳解Flutter的路由導(dǎo)航

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

這篇文章主要介紹了Flutter的路由導(dǎo)航的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用Flutter，感興趣的朋友可以了解下

Flutter 的路由導(dǎo)航

路由管理或?qū)Ш焦芾恚簭囊粋€頁面平滑地過渡到另一個頁面，我們需要有一個統(tǒng)一的機制來管理頁面之間的跳轉(zhuǎn)。在原生的Android 開發(fā)，是通過startActivity或startActivityForResult 來完成頁面的跳轉(zhuǎn)的，在Flutter 中如何實現(xiàn)呢？

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

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

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

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

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

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

應(yīng)用程序 MaterialApp 提供一個頁面名稱映射規(guī)則，即路由表 routes，路由表實際上是一個 Map，其中 key 值對應(yīng)頁面名字，而 value 值則是一個 WidgetBuilder 回調(diào)函數(shù)，我們需要在這個函數(shù)中創(chuàng)建對應(yī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"),

默認路由

使用命名路由，該命名不在路由表中就會報錯，這時候可以通過設(shè)置默認路由，當找不到的時候，進到到一個指定的頁面。只需要在 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'),
  );
 }
}

頁面跳轉(zhuǎn)并傳遞參數(shù)

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

1. 傳遞參數(shù)：
 Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
 2. 接收參數(shù)：
 
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("傳遞參數(shù)"),
   ),
   body: Text("得到的參數(shù)是:$msg"),
  );
 }
}
3， 參數(shù)的回傳
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("返回參數(shù)"),
   ),
   body: Text("得到的參數(shù)是:$msg"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.backspace),
    onPressed: () => Navigator.pop(context, "hi"),
   ),
  );
 }
}
4. 回傳參數(shù)的接收：通過then方法
 Navigator.pushNamed(context, "route_Page4", arguments: "hello")
          .then((value) => print("返回的參數(shù)是$value")),

總結(jié)

頁面間的跳轉(zhuǎn)通過 Navigator 和 PageRoute來完成，有兩種方式：基本路由和命名路由；由于使用命名路由可能存在路由找不到頁面的情況，所以通過配置 onUnknownRoute 屬性來確定，在路由找不到的時候進入到指定頁面；通過通過介紹頁面跳轉(zhuǎn)的參數(shù)傳遞和介紹，完成了頁面跳轉(zhuǎn)的介紹。

以上就是詳解Flutter的路由導(dǎo)航的詳細內(nèi)容，更多關(guān)于Flutter 路由導(dǎo)航的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: