在安卓和蘋果設(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í)。