天天看點
傳回

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

      小菜在去年剛接觸 Flutter 時學習了一下頁面跳轉路由的基本用法，随着逐漸的學習和場景的使用，對一些特殊場景下路由使用進行嘗試；

Pop / Push

pushReplacementNamed / pushReplacement

      pushReplacementNamed / pushReplacement 可以将新的頁面替換掉舊的頁面，舊的頁面被銷毀；

      如 A -> B -> C 在 B 頁面采用 pushReplacementNamed / pushReplacement 方式到 C 時，B 被 C 所替換，由 C 傳回頁面時直接到 A，其中 B 在替換時被銷毀；使用場景可用于 SplashActivity -> MainActivity;

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
@optionalTypeArgs
Future<T> pushReplacement <T extends Object, TO extends Object>(
    BuildContext context,   // 上下文環境
    Route<T> newRoute,      // 預跳轉頁
    { TO result }           // 設定傳回資訊
)
           
FlatButton(
    color: Colors.green,
    child: btnText('PushReplacementNamed -> ForthPage'),
    onPressed: () {
      Navigator.pushReplacementNamed(context, 'forthPage',
          result: '{result: pushReplacementNamed}');
    }),
FlatButton(
    color: Colors.greenAccent,
    child: btnText('PushReplacement -> ForthPage'),
    onPressed: () {
      Navigator.pushReplacement(context,
          MaterialPageRoute(builder: (BuildContext context) {
        return ForthPage();
      }), result: '{result: pushReplacement}');
    }),
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

popAndPushNamed

      popAndPushNamed 可以将本頁面銷毀并打開新的頁面，舊的頁面會被銷毀；

      如 A -> B -> C 在 B 頁面采用 popAndPushNamed 方式到 C 時，B 優先銷毀，再打開 C；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
@optionalTypeArgs
Future<T> pushReplacement <T extends Object, TO extends Object>(
    BuildContext context,           // 上下文環境
    Route<T> newRoute,              // 預跳轉頁
    { TO result, Object arguments } // 設定傳回資訊和參數
)
           
FlatButton(
    color: Colors.redAccent,
    child: btnText('PopAndPushNamed -> ForthPage'),
    onPressed: () {
      Navigator.popAndPushNamed(context, 'forthPage',
          result: '{result: popAndPushNamed}');
    }),
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

對比一：

      小菜為了區分測試，在 SecondPage -> ThirdPage 時設定了左進左出的路由動效；在 ThirdPage -> ForthPage 時設定了右進右出的路由動效；

      上述兩種方式的差別是：pushReplacementNamed / pushReplacement 直接打開 ForthPage 不會展示 ThirdPage 退出的動畫效果；而 popAndPushNamed 會展示 ThirdPage 退出的動畫效果；

pushNamedAndRemoveUntil / pushAndRemoveUntil

      采用 pushNamedAndRemoveUntil/pushAndRemoveUntil 時，若 predicate 為 false 可以到達預展示頁面，并銷毀棧内其他所有頁面；若為 true 則跟普通開啟新的頁面無異；

      如 A -> B -> C 在 C 頁面采用 pushNamedAndRemoveUntil / pushAndRemoveUntil 方式啟動新頁面 D，則優先啟動 D 并将 C -> B -> A 全部銷毀；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

      如 A -> B -> C -> D 在 D 頁面采用 pushNamedAndRemoveUntil / pushAndRemoveUntil 方式到達 B，則優先啟動新頁面 B 并将棧中已存在的 D -> C -> B -> A 全部銷毀；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
@optionalTypeArgs
Future < T > pushNamedAndRemoveUntil < T extends Object >（
    BuildContext context，          // 上下文環境
    String newRouteName，           // 預跳轉頁
    RoutePredicate predicate，{     // 頁面狀态
        Object arguments
    }
）
           
FlatButton(
    color: Colors.teal,
    child: btnText('PushAndRemoveUntil -> SecondPage/false'),
    onPressed: () {
      Navigator.pushAndRemoveUntil(context,
          MaterialPageRoute(builder: (BuildContext context) {
        return SecondPage();
      }), (route) => false);
    }),
FlatButton(
    color: Colors.pinkAccent,
    child: btnText('PushAndRemoveUntil -> SecondPage/true'),
    onPressed: () {
      Navigator.pushNamedAndRemoveUntil(context, 'secondPage', (route) => true);
    }),
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

popUntil

      采用 popUntil 時，若預到達頁面已在頁面棧中，則從自身開始逐個銷毀預到達頁面的上級棧頁面；很像 Android 中 SingleTask 棧内複用模式；若預到達頁面不在頁面棧中，則不可用該方法，普通 Push 方法即可；

      如 A -> B -> C -> D 在 D 頁面采用 popUntil 方式到達 A 時，則 D -> C -> B 按順序銷毀并到達 A；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
void popUntil （
    BuildContext context,       // 上下文環境
    RoutePredicate predicate    // 預跳轉頁
）

      使用 popUntil 時不可傳遞傳回值，對于傳回首頁 firsPage 時不可用 ModalRoute.withName('firstPage') 小菜整理了其他幾種方式擷取根目錄首頁路徑；

// 跳轉 SecondPage
FlatButton(
    color: Colors.teal,
    child: btnText('PopUntil To -> SecondPage'),
    onPressed: () {
      Navigator.popUntil(context, ModalRoute.withName('secondPage'));
    }),
    
// 跳轉首頁 FirstPage
FlatButton(
    color: Colors.orange,
    child: btnText('PopUntil To -> FirstPage'),
    onPressed: () {
      Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName));
//    Navigator.popUntil(context, (route) => route.isFirst);
//    Navigator.popUntil(context, ModalRoute.withName('/'));
    }),
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

對比二：

      上述兩種方式的差別是：pushNamedAndRemoveUntil / pushAndRemoveUntil 方式不管棧中是否存在，均會啟動新的頁面并清空原來的棧；而 popUntil 隻是在回退到棧中所存在的頁面，及循環 pop() 直到所展示頁面；

仿 popUntil 傳參

      popUntil 方式是不支援 result 内容回調的，但在日常開發中會有很多情況需要傳遞 result；小菜嘗試了如下兩種方式；

嘗試一：

      小菜分析 popUntil 源碼，确實是在循環執行 pop() 方法，且沒有 result 方法，小菜驗證了各頁面 then 中接收到 null；

void popUntil(RoutePredicate predicate) {
   while (!predicate(_history.last))
      pop();
}

      這樣我們可以用最直接的方法手動調用 pop(result) 傳遞一個狀态碼，在各頁面的 then 方法中接收判斷，再調用 pop(result) 等直到目标頁面；小菜認為這種方式的優點是實作簡單，思路清晰；缺點是每個頁面均需要接收回調判斷；

      小菜查詢網上 nguyentuanhung 自定義的 flutter_popuntil 也是同樣的實作方法；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
// 定義一個 Result
class PopWithResults<T> {
  /// poped from this page
  final String fromPage;
  /// pop until this page
  final String toPage;
  /// results
  final Map<String, T> results;
  /// constructor
  PopWithResults({@required this.fromPage, @required this.toPage, this.results});
}
// 調用傳參
class Page4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( body: Center(
            child: RaisedButton( child: Text("back to page 2"),
                onPressed: () {
                  Navigator.of(context).pop(PopWithResults(
                      fromPage: 'page4', toPage: 'page2',
                      results: {"pop_result": "this is the pop's result"}));
                })));}
}
class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( body: Center( child: RaisedButton(
                child: Text("to page 4"),
                onPressed: () {
                  Navigator.of(context).pushNamed('page4').then((results) {
                    if (results is PopWithResults) {
                      PopWithResults popResult = results;
                      if (popResult.toPage == 'page3') {
                        // TODO do stuff
                      } else {
                        Navigator.of(context).pop(results);
                      }
                    }
                  });
                })));}
}
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( body: Center( child: RaisedButton(
                child: Text("to page 3"),
                onPressed: () {
                  Navigator.of(context).pushNamed('page3').then((results) {
                    if (results is PopWithResults) {
                      PopWithResults popResult = results;
                      if (popResult.toPage == 'page2') {
                        print('結果是--->${popResult.results.values.toList()[0]}');
                      }}
                  });
                })));}
}
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
嘗試二：

      上述方法簡單有效，但對于很複雜的流程可能略顯複雜；小菜舉一個極端的例子，連續啟動 10 個頁面，若用上述方式，則需要在 10 個頁面上進行 then 判斷處理；

      小菜嘗試了第二種方法，借助狀态管理 Provider，在調用 popUntil 時給一個 Provider 指派，在到達目的頁面時擷取 Provider 内容；有需要可以參考和整理的 Provider 基本用法；

【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#
class PopResult with ChangeNotifier {
  String _from = '', _result = '';
  
  String get from => _from;
  String get result => _result;

  void setFrom(from) {
    _from = from;
    notifyListeners();
  }

  void setResult(res) {
    _result = res;
    notifyListeners();
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ ChangeNotifierProvider(builder: (_) => PopResult()) ],
        child: Consumer<PopResult>(builder: (context, counter, _) {
          return MaterialApp(
              home: FirstPage(),
              routes: {
                'firstPage': (BuildContext context) => FirstPage(),  'secondPage': (BuildContext context) => SecondPage(),
                'thirdPage': (BuildContext context) => ThirdPage(),  'forthPage': (BuildContext context) => ForthPage() });
        }));}
}
class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => new _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center( child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          FlatButton(
              color: Colors.pinkAccent,
              child: btnText('Push To -> SecondPage'),
              onPressed: () {
                Navigator.pushNamed(context, "secondPage").then((val) {
                  print('FirstPage-->$val');
                  if (Provider.of<PopResult>(context).from == 'forthPage') {
                    print('FirstPage.from---->${Provider.of<PopResult>(context).from}');
                    print('FirstPage.result---->${Provider.of<PopResult>(context).result}');
                    // 将來源置空，防止影響其他傳回邏輯
                    Provider.of<PopResult>(context).setFrom('');
                  }
                });
              })
        ]))}
}
class ForthPage extends StatefulWidget {
  @override
  _ForthPageState createState() => new _ForthPageState();
}
class _ForthPageState extends State<ForthPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center( child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          FlatButton(
              color: Colors.blueAccent,
              child: btnText('PopUntil Provider -> FirstPage With Result'),
              onPressed: () {
                Provider.of<PopResult>(context, listen: false)..setFrom('forthPage')..setResult('I am from ForthPage');
                Navigator.popUntil(context, ModalRoute.withName('/'));
              })])));}
}
【Flutter 專題】57 圖解頁面小跳轉 (三) #yyds幹貨盤點#

路由動效

      小菜實作一個簡單的對話框：由底部彈出且透明度由 0.0 到 1.0；但小菜在測試時 barrierColor 進入時在對話框展示完成後展示，在退出時逐漸消失；仍有待研究；

FlatButton(
    color: Colors.green,
    child: Text('ShowDialog'),
    onPressed: () {
      Navigator.of(context).push(PageRouteBuilder(
          opaque: false,
          barrierDismissible: false,
          barrierColor: Colors.black12.withOpacity(0.5),
          maintainState: false,
          transitionDuration: const Duration(milliseconds: 1000),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return SlideTransition(
                position: Tween<Offset>(begin: Offset(0.0, 1.0), end: Offset(0.0, 0.0))
                    .animate(CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn)),
                child: FadeTransition(
                    opacity: Tween(begin: 0.0, end: 1.0).animate(
                        CurvedAnimation(parent: animation, curve: Curves.linear)),
                    child: child));
          },
          pageBuilder: (context, animation, secondaryAnimation) {
            return Center(
                child: Container(
                    height: 200.0, width: 200.0,
                    decoration: BoxDecoration(color: Colors.greenAccent, borderRadius: BorderRadius.circular(5.0)),
                    child: Icon(Icons.ac_unit, color: Colors.white)));
          }));
    }),
Flutter 小菜 Android 小菜鳥 Flutter 專題 0 基礎學習 Flutter
上一篇: 在 Flutter 中使用交錯網格視圖建立瀑布流布局#yyds幹貨盤點#
下一篇: 最後的體面？美媒曝光英國最高機密後BBC記者又搶“首發”，英國女王去世後，有些網友的反應太詭異了

繼續閱讀