Flutter路由跳轉及參數傳遞

本文要介紹的知識點

• 用路由推出一個新頁面
• 打開新頁面時，傳入參數
• 參數的回傳

路由

做Android/iOS原生開發的時候，要打開一個新的頁面，你得知道你的目標頁面對象，然后初始化一個Intent或者ViewController，再通過startActivity或者pushViewController來推出一個新的頁面，不能跟web一樣，直接丟一個鏈接地址就跳轉到新的頁面。當然，可以自己去加一個中間層來實現這些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳轉的實現。我們可以直接使用這些功能。

Flutter路由介紹

Flutter里面有路由支持所有的路由場景，push、pop頁面，頁面間的參數傳遞等等。flutter里面的路由可以分成兩種，一種是直接注冊，不能傳遞參數。另一種要自己構造實例，可以傳遞參數。我們暫時把它們規為靜態路由和動態路由。

靜態路由的注冊

在新建一個MD風格的App的時候，可以傳入一個routes參數來定義路由。但是這里定義的路由是靜態的，它不可以向下一個頁面傳遞參數。

return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter實例'),
      routes: <String, WidgetBuilder> {
        // 這里可以定義靜態路由，不能傳遞參數
        '/router/second': (_) => new SecondPage(),
        '/router/home': (_) => new RouterHomePage(),
      },
    );

　　

靜態路由的使用

push一個新頁面,pushNamed方法是有一個Future的返回值的，所以靜態路由也是可以接收下一個頁面的返回值的。但是不能向下一個頁面傳遞參數。

Navigator.of(context).pushNamed('/router/second');

// 帶返回值
Navigator.of(context).pushNamed('/router/second').then((value) {
                    // dialog顯示返回值
                    _showDialog(context, value);
                  })

　　

pop回上一個頁面

Navigator.of(context).pop('這個是要返回給上一個頁面的數據');

　　

動態路由的使用

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

Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                    return new SecondPage(title: '路由是個好東西，要進一步封裝');
                  }));

　　

也可以用PageRouterBuilder來自定義打開動畫

Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
            (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
          return new RefreshIndicatorDemo();
        }, transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          // 添加一個平移動畫
          return BRouter.createTransition(animation, child);
        }));

　　

平移的變換

/// 創建一個平移變換
  /// 跳轉過去查看源代碼，可以看到有各種各樣定義好的變換
  static SlideTransition createTransition(
      Animation<double> animation, Widget child) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(animation),
      child: child, // child is the value returned by pageBuilder
    );
  }