Flutter中的路由

渡口一艘船發表於2018-12-15
Flutter路由

首發於我的公眾號

Flutter中訊息傳遞

前言

路由是native中應用的比較多，特別是元件化的工程中，更是用來解耦的利器，比較常用的有阿里的ARouter等，路由這一思想也是借鑑前端而來，比如web中頁面跳轉就是一個url就到了一個新的頁面，Flutter既然是新一代的跨端方案，而且從RN借鑑了不少思想，路由當然也是必不可少的，本篇將瞭解下Flutter的路由

同步更新gitpage xsfelvis.github.io/2018/12/15/…

Flutter的路由

在Flutter中支援所有路由場景，push、pop頁面，頁面間的引數傳遞等等。flutter裡面的路由可以分成兩種，

  • 一種是直接註冊，不能傳遞引數，可以稱 為靜態路由
  • 一種要自己構造例項，可以傳遞引數，可以稱為 動態路由。

靜態路由

在建立時就已經明確知道了要跳轉的頁面和值，在新建一個MD風格的App的時候，可以傳入一個routes引數來定義路由。但是這裡定義的路由是靜態的，它不可以向下一個頁面傳遞引數

@override
Widget build(BuildContext context) {
  return new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
      primarySwatch: Colors.blue,
    ),
    //註冊路由表
    routes: {
      "router/static_page": (context) => StaticRoute(),
    },
    home: new MyHomePage(title: 'Flutter Demo Home Page'),
  );
}
複製程式碼

通過routes這個屬性註冊好跳轉的頁面即key-value，上面的程式碼中

key：router/static_page value: StaticRouter 然後使用的時候使用

FlatButton(
  child: Text("open static router"),
  textColor: Colors.blue,
  onPressed: () {
    Navigator.pushNamed(context, "router/static_page");
  },
)
複製程式碼

動態路由

當需要向下一個頁面傳遞引數時，要用到所謂的動態路由，自己生成頁面物件，所以可以傳遞自己想要的引數。

FlatButton(
  child: Text("open dynamic router"),
  textColor: Colors.blue,
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(
        builder: (context) {
          return new EchoRoute("傳入跳轉引數");
        }));
    或者
    Navigator.of（(context).push(MaterialPageRoute(
        builder: (context) {
          return new EchoRoute("傳入跳轉引數");
        }));
  },
)
複製程式碼

點選返回

new RaisedButton(
  child: new Text("點我返回"),
  onPressed: () {
    Navigator.of(context).pop();
  },
  color: Colors.blue,
  highlightColor: Colors.lightBlue,
)
複製程式碼

我們可以在前一個頁面接受第二個頁面的返回值 在第一個頁面跳轉時候加上futrue來接收

FlatButton(
  child: Text("open dynamic router"),
  textColor: Colors.blue,
  onPressed: () {
    Future future = Navigator.push(context,
        MaterialPageRoute(builder: (context) {
      return new EchoRoute("傳入跳轉引數");
    }));
    //接收動態頁面返回時傳回的值
    future.then((value) {
      showDialog(
          context: context,
          child: new AlertDialog(
            title: new Text(value),
          ));
    });
  },
複製程式碼

在EchoRoute頁面 返回時使用帶引數的pop方法

new RaisedButton(
                child: new Text("點我返回"),
                onPressed: () {
//                  Navigator.of(context).pop();
                  Navigator.of(context).pop("我是來自dymamic 關閉的返回值");
                },
                color: Colors.blue,
                highlightColor: Colors.lightBlue,
              )
複製程式碼

這樣就會在關閉EchoRoute回到跳轉前頁面時彈出dialog收到EchoRoute傳來的引數

小結

Navigator的職責是負責管理Route的，管理方式就是利用一個棧不停壓入彈出，當然也可以直接替換其中某一個Route。而Route作為一個管理單元，主要負責建立對應的介面，響應Navigator壓入路由和彈出路由

入棧：

  • 使用Navigator.of(context).pushName(“path“)或者Navigator.pushName(context,“path“)可以進行靜態路由的跳轉前提是需要在route屬性裡面註冊
  • 使用push(Route)可以進行態路由的跳轉，動態路由可以傳入未知資料

出棧

  • 使用pop()可以進行路由的出棧並且可以傳遞引數
  • 可以使用Future接收上個頁面返回的值。

程式碼在 github.com/xsfelvis/le…

                       歡迎關注我的公眾號，一起學習，共同提高~
複製程式碼

公眾號小.jpg

相關文章