【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】：