【Flutter 實戰】路由堆棧詳解

老孟導讀：Flutter中路由是很是重要的部分，任何一個應用程序都離不開路由管理，此文講解路由相關方法的使用和路由堆棧的變化。

Flutter 路由管理中有兩個很是重要的概念：

• Route：路由是應用程序頁面的抽象，對應 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 管理。
• Navigator：Navigator 是一個組件，管理和維護一個基於堆棧的歷史記錄，經過 push 和 pop 進行頁面的跳轉。

push 和 pop

假設如今有2個頁面 A 和 B，A中有一個按鈕，點擊跳轉到 B 頁面，A 頁面代碼：

class APage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
        child: Text('A 頁面'),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return BPage();
          }));
        },
      ),
    );
  }
}

B 頁面代碼：

class BPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          child: Text('B 頁面'),
          onPressed: () {

          },
        ),
      ),
    );
  }
}

當應用程序位於A頁面時，路由堆棧中只有A，點擊按鈕跳轉到B頁面，路由堆棧中有 B 和 A，且 B 處於棧頂。

點擊 B 頁面的按鈕返回到 A 頁面，修改 B 頁面按鈕點擊事件：

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

路由堆棧的變化：

上面案例的效果是從 B 頁面跳轉到 A 頁面，那是否也可使用 push 方法？修改 B 頁面按鈕點擊事件：

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return APage();
    }));
  },
)

從效果上看也能夠跳轉到 A 頁面，路由堆棧：

那是否可使用 push 代替 pop 呢？ 答案確定是不能夠的，

1. 試想以下場景，進入購物App，展現購物列表，點擊其中一個進入商品詳細頁面，使用 push 再次進入購物列表，而後在進入商品詳細頁面...，如此反覆，路由堆棧中將會存放大量的購物列表和商品詳細頁面的路由，點擊返回按鈕，會將反覆顯示購物列表和商品詳細頁面。
2. 頁面切換時路由動畫 push 和 pop 是不一樣。

maybePop 和 canPop

上面案例若是點擊 A 頁面按鈕直接調用 pop 會如何？

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

在 A 頁面時路由堆棧中只有 A，調用 pop 後，路由堆棧變化：

此時路由堆棧爲空，沒有可顯示的頁面，應用程序將會退出或者黑屏，好的用戶體驗不該如此，此時可使用 maybePop，maybePop 只在路由堆棧有可彈出路由時纔會彈出路由。

上面的案例在 A 頁面執行maybePop：

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).maybePop();
  },
)

點擊後不會出現彈出路由，由於當前路由堆棧中只有 A，在 B頁面執行maybePop，將會返回到 A 頁面。

也能夠經過 canPop 判斷當前是否能夠 pop：

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    if(Navigator.of(context).canPop()){
      Navigator.of(context).pop();
    }
  },
)

pushNamed

pushNamed 是命名路由的方式，須要在 MaterialApp 中配置路由名稱：

MaterialApp(
      title: 'Flutter Demo',
      routes: <String, WidgetBuilder>{
        '/A': (context) => APage(),
        '/B': (context) => BPage(),
      },
      home: Scaffold(
        body: APage(),
      ),
    )

從 A 跳轉到 B：

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B');
  },
)

pushReplacementNamed 和 popAndPushNamed

有A、B、C 三個頁面，A頁面經過 pushNamed 跳轉到 B：

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B');
  },
)

B 經過 pushReplacementNamed 跳轉到 C：

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
      Navigator.of(context).pushReplacementNamed('/C');
  },
)

點擊 C 頁面按鈕執行 pop：

RaisedButton(
  child: Text('C 頁面'),
  onPressed: () {
    if(Navigator.of(context).canPop()){
      Navigator.of(context).pop();
    }
  },
)

點擊 C 頁面按鈕直接返回到了 A 頁面，而不是 B 頁面，由於 B 頁面使用 pushReplacementNamed 跳轉，路由堆棧變化：

B 頁面跳轉到 C 頁面，使用 popAndPushNamed：

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
      Navigator.of(context).popAndPushNamed('/C');
  },
)

popAndPushNamed 路由堆棧和 pushReplacementNamed 是同樣，惟一的區別就是 popAndPushNamed 有 B 頁面退出動畫。

popAndPushNamed 和 pushReplacementNamed 使當前頁面不在路由堆棧中，因此經過 pop 沒法返回此頁面。

適用場景：

• 歡迎頁面：應用程序打開後首先進入歡迎界面，而後進入首頁，進入首頁後不該該再進入歡迎界面。
• 登陸頁面：登陸成功後進入相關頁面，此時按返回按鈕，不該再進入登陸頁面。

pushNamedAndRemoveUntil

有以下場景，應用程序進入首頁，點擊登陸進入登陸頁面，而後進入註冊頁面或者忘記密碼頁面...，登陸成功後進入其餘頁面，此時不但願返回到登陸相關頁面，此場景可使用 pushNamedAndRemoveUntil。

有A、B、C、D 四個頁面，A 經過push進入 B 頁面，B 經過push進入 C 頁面，C 經過 pushNamedAndRemoveUntil 進入 D 頁面同時刪除路由堆棧中直到 /B 的路由，C 頁面代碼：

RaisedButton(
  child: Text('C 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamedAndRemoveUntil('/D', ModalRoute.withName('/B'));
  },
),

D 頁面按鈕執行 pop：

RaisedButton(
  child: Text('D 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

從 C 頁面跳轉到 D 頁面路由堆棧變化：

Navigator.of(context).pushNamedAndRemoveUntil('/D', ModalRoute.withName('/B'));

表示跳轉到 D 頁面，同時刪除D 到 B 直接全部的路由，若是刪除全部路由，只保存 D：

Navigator.of(context).pushNamedAndRemoveUntil('/D', (Route route)=>false);

路由堆棧變化：

popUntil

有以下場景，在入職新公司的時候，須要填寫各類信息，這些信息分爲不一樣部分，好比基本信息、工做信息、家庭信息等，這些不一樣模塊在不一樣頁面，填寫信息時能夠返回上一頁，也能夠取消，取消返回到首頁，此場景可使用 popUntil，一直 pop 到指定的頁面。

有A、B、C、D 四個頁面，D 頁面經過 popUntil 一直返回到 A 頁面，D 頁面代碼：

RaisedButton(
  child: Text('D 頁面'),
  onPressed: () {
    Navigator.of(context).popUntil(ModalRoute.withName('/A'));
  },
)

路由堆棧變化：

傳遞數據

有以下場景，商品列表頁面，點擊跳轉到商品詳情頁面，商品詳情頁面須要商品的惟一id或者商品詳情數據，有兩種方式傳遞數據：

第一種：經過構造函數方式：

class ProductDetail extends StatelessWidget {
  final ProductInfo productInfo;

  const ProductDetail({Key key, this.productInfo}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

跳轉代碼：

Navigator.of(context).push(MaterialPageRoute(builder: (context){
  return ProductDetail(productInfo: productInfo,);
}));

此種方式沒法用於命名路由的跳轉方式。

第二種：經過命名路由設置參數的方式：

A 頁面傳遞數據，

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B',arguments: '來自A');
  },
)

B 頁面經過 ModalRoute.of(context).settings.arguments 接收數據：

RaisedButton(
  child: Text('${ModalRoute.of(context).settings.arguments}'),
  onPressed: () {
    Navigator.of(context).pushNamed('/C');
  },
)

返回數據

B 頁面返回代碼：

RaisedButton(
  child: Text('${ModalRoute.of(context).settings.arguments}'),
  onPressed: () {
    Navigator.of(context).pop('從B返回');
  },
)

A 頁面接收返回的數據：

class APage extends StatefulWidget {
  @override
  _APageState createState() => _APageState();
}

class _APageState extends State<APage> {
  String _string = 'A 頁面';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          child: Text(_string),
          onPressed: () async {
            var result =
                await Navigator.of(context).pushNamed('/B', arguments: '來自A');
            setState(() {
              _string = result;
            });
          },
        ),
      ),
    );
  }
}

push 相關方法返回 Future 類型，使用 await 等待返回結果。

交流

交流

老孟Flutter博客（330個控件用法+實戰入門系列文章）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：