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

標籤：Dart

上一篇：學習第27天

下一篇：你還在用 BeanUtils？試試 MapStruct，優雅的物件轉換解決方案！