flutter中頁面跳轉(zhuǎn)之Navigator

在安卓和蘋果設(shè)備上都有頁面跳轉(zhuǎn)的操作,flutter中是使用Navigator來管理頁面之間的跳轉(zhuǎn)的。在萬物皆Widget的flutter中,Navigator自然也沒有逃過成為一個widget的命運,它屬于StatefulWidget的子類。Navigator負責(zé)管理頁面的的堆棧,并提供管理堆棧的方法,像push(顯示頁面)、pop(關(guān)閉頁面);
Navigator顯示頁面通常用這幾種方式:
一、使用一個builder函數(shù)創(chuàng)建MaterialPageRoute實例,代碼如下:

children: <Widget>[
        RaisedButton(
        //調(diào)用_testPush方法
          onPressed: _testPush, child: Text("跳轉(zhuǎn)到第二個頁面"),),
        Text(_result, style: TextStyle(fontSize: 20),)
      ],

void _testPush() {
    Navigator.push(context, new MaterialPageRoute(builder: (context) {
      return new SecondViewWidget("from first view");
      }, ),);
}

class SecondViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: AppBar(title: Text("SecondViewWidget"),),
      body: Center(child: Column(
      mainAxisAlignment: MainAxisAlignment.center, children: <Widget>    [
    Text("second View", style: TextStyle(fontSize: 20, color: Colors.blue),)
    Text("$_value", style: TextStyle(fontSize: 20, color: Colors.blue),),
    RaisedButton(onPressed: _back(context), child: Text("返回上一頁"),),
  ],),),);
  }
}

 _back(BuildContext context) {
    Navigator.pop(context, "hello");
  }

從上面代碼可以看出,當(dāng)需要從第一個頁面向第二個頁面?zhèn)鬟f參數(shù)時,是通過第二個頁面的構(gòu)造函數(shù)來傳遞的,這個容易理解。那么當(dāng)?shù)诙€頁面結(jié)束時,需要從第二個頁面向第一個頁面?zhèn)鲄?shù)時怎么做呢?當(dāng)要退出頁面時調(diào)用Navigator.pop(context, "hello");方法。這個方法的第二個參數(shù)就是要向上一個頁面返回的結(jié)果值,返回后只需在上個頁面接收就可以了。下面來看一下上一個頁面是如何接收數(shù)據(jù)的:

void _testPush() async {
    String result = await Navigator.push(
      context, new MaterialPageRoute<String>(builder: (context) {
      return new SecondViewWidget("from fist value");
    }, maintainState: false),);
    if (result != null) {
      print("result:$result");
    }
}

依然是上面跳轉(zhuǎn)頁面的方法,區(qū)別在于等待push方法返回一個結(jié)果值,這個結(jié)果值就是第二個頁面返回來的結(jié)果。

二、使用命名方式來管理頁面
把頁面名稱使用類似路徑的結(jié)構(gòu)(例如,'/a/b/c')。應(yīng)用程序的主頁路徑默認為'/'。MaterialApp可以使用Map<String, WidgetBuilder>創(chuàng)建,它將路由的名稱映射到將創(chuàng)建它的builder函數(shù)。MaterialApp使用這個映射為其導(dǎo)航器的onGenerateRoute回調(diào)創(chuàng)建一個值。

class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          title: 'Flutter Demo',
          //把所有的頁面路徑放到集合中
          routes: {
          "/": (BuildContext contxt) => new MyHomePage(title: "first    page"),
          "/second": (BuildContext context) => SecondViewWidget()},
          theme: ThemeData(
          primarySwatch: Colors.blue,
          ),
    //home不能與“/”混用,否則會報錯的
//      home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
      }
   }

    children: <Widget>[
        RaisedButton(
          onPressed: _testPush3, child: Text("跳轉(zhuǎn)到第二個頁面"),),
       ],

 void _testPush3() {
    Navigator.pushNamed(context, "/second", arguments: "from fistView");
  }

這種方式的跳轉(zhuǎn),頁面之間的傳參和第一種不太一樣了Navigator.pushNamed(context, "/second", arguments: "from fistView");
arguments對應(yīng)的就是要傳過去的值,下面看在第二個頁面中如何接收:

  class SecondViewWidget extends StatelessWidget {
      SecondViewWidget(this._value);

    String _value;

    @override
    Widget build(BuildContext context) {
        String value = ModalRoute.of(context) .settings .arguments;
        print("value:$value");
        ........
      }
    }

通過這句String value = ModalRoute.of(context) .settings .arguments;獲取到值,需要注意的是value的類型需要傳過來的類型一致。
從第二個頁面返回數(shù)據(jù)到第一個頁面的方式同上述第一種情況。

三、在安卓原生的應(yīng)用中頁面切換通常會加入動畫,那么在flutter中也可以用PageRouteBuilder的方式來完成切換動畫。有請代碼君:

  void _testPush2() {
Navigator.push(context,
    new PageRouteBuilder(pageBuilder: (context, _, __) {
      return new SecondViewWidget();
    }, transitionsBuilder: (context, Animation<double> animation, _,
        Widget child) {
      return FadeTransition(opacity: animation,
          child: new RotationTransition(
            turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
            child: child,));
    },
        transitionDuration: Duration(seconds: 1)));
}

由于是初學(xué)flutter有不對的地方,煩請大家?guī)兔χ刚?,共同學(xué)習(xí)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容