flutter页面间的跳转有两种方式，一种动态构建路由的方式，一种提前命名路由的方式。
构建路由方式
push方法：直接跳转到下个页面，可以传递参数
Navigator.of(context).push(
new MaterialPageRoute(builder: (BuildContext context) {
//TextWdigetPage要跳转的页面
//title要传递的参数
return TextWdigetPage(title: "传递的参数");
}))
),
或者
Navigator.push(context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage(title: "传递的参数");
})
)
pushAndRemoveUntil方式：跳转到下个页面，并且销毁当前页面
//第一个为上下文环境，
// 第二个参数为静态注册的对应的页面名称，
// 第三个参数为跳转后的操作，route == null 为销毁当前页面
Navigator.pushAndRemoveUntil(context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage(title: "传递的参数");
}), (route) => route == null
)
提前命名路由
只能在mian.dart里面写死要跳转的路由协议
void main() {
runApp(MaterialApp(
initialRoute:"one", // 默认路由信息
routes: {
//全部路由信息
"one": (context) {
return OnePage();
},
"two": (context) =>TwoPage(),
// "three":(context)=>ThreePage(),
"four": (context) =>FourPage()
},
onGenerateRoute: (setting) {
if (setting.name == ThreePage.routerName) {
var text = setting.arguments;
return MaterialPageRoute(builder: (context) {
return ThreePage(
text:"hello three",
);
});
}
},
));
}
1.不带参数跳转到下个页面：
Navigator.pushNamed(context, "two");
2.带参数跳转到下个页面，ModalRoute.of(context).settings.arguments获取:
Navigator.pushNamed(context, "two", arguments:"来自第一个页面的数据");
3.带参数跳转到下个页面，onGenerateRoute方式获取：
Navigator.pushNamed(context, ThreePage.routerName, arguments:"来自第一个页面的数据")
.then((value) {});
4.跳转到下个页面,并接收下个页面返回的参数：
Navigator.pushNamed(context, "four", arguments:"来自第一个页面的数据")
.then((value) {
print("!!!!!!!!!!!"+value);
});
页面的销毁：
//构建路由
//一个参数，为上下文环境，销毁当前页面
Navigator.pop(context);
//一个参数，第一个为上下文环境，第二个为要携带的参数，销毁当前页面
Navigator.pop(context, "携带参数");
//命名路由
Navigator.popAndPushNamed(context, 'two')
接收路由返回的参数
//构建路由
1.
Navigator.push(context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage(title: "传递的参数");
})
).then((Object result) {
print("返回值：${result.toString()}");
})
2.
()async {
var result =await Navigator.push(context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage(title:"传递的参数");
})
);
print("返回值：${result.toString()}");
}
3.
Navigator.pushAndRemoveUntil(context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage(title: "传递的参数");
}), (route) => route == null
).then((Object result) {
print("返回值：${result.toString()}");
})
4.命名路由
Navigator.pushNamed(context, "listview_builder_page").then((Object result) {
print("返回值：${result.toString()}");
})
练习demo，链接https://gitee.com/xgljh/Flutter
提前命名路由
只能在mian.dart里面写死要跳转的路由协议
```
void main() {
runApp(MaterialApp(
initialRoute:"one", // 默认路由信息
routes: {
//全部路由信息
"one": (context) {
return OnePage();
},
"two": (context) =>TwoPage(),
// "three":(context)=>ThreePage(),
"four": (context) =>FourPage()
},
onGenerateRoute: (setting) {
if (setting.name == ThreePage.routerName) {
var text = setting.arguments;
return MaterialPageRoute(builder: (context) {
return ThreePage(
text:"hello three",
);
});
}
},
));
}
```
1.不带参数跳转到下个页面：
```
Navigator.pushNamed(context, "two");
```
2.带参数跳转到下个页面，ModalRoute.of(context).settings.arguments获取:
```
Navigator.pushNamed(context, "two", arguments:"来自第一个页面的数据");
```
3.带参数跳转到下个页面，onGenerateRoute方式获取：
```
Navigator.pushNamed(context, ThreePage.routerName, arguments:"来自第一个页面的数据")
.then((value) {});
```
4.跳转到下个页面,并接收下个页面返回的参数：
```
Navigator.pushNamed(context, "four", arguments:"来自第一个页面的数据")
.then((value) {
print("!!!!!!!!!!!"+value);
});
```
OnePage
```
class OnePageextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("one 页面"),
),
body:Column(
children: [
InkWell(
child:Text(
"不带参数跳转到下个页面",
style:TextStyle(fontSize:18),
),
onTap: () {
Navigator.pushNamed(context, "two");
},
),
InkWell(
child:Text("带参数跳转到下个页面，ModalRoute.of(context).settings.arguments", style:TextStyle(fontSize:18)),
onTap: () {
Navigator.pushNamed(context, "two", arguments:"来自第一个页面的数据");
},
),
InkWell(
child:
Text("带参数跳转到下个页面，onGenerateRoute方式获取", style:TextStyle(fontSize:18)),
onTap: () {
Navigator.pushNamed(context, ThreePage.routerName, arguments:"来自第一个页面的数据")
.then((value) {});
},
),
InkWell(
child:
Text("跳转到下个页面,并接受下个页面返回的参数", style:TextStyle(fontSize:18)),
onTap: () {
Navigator.pushNamed(context, "four", arguments:"来自第一个页面的数据")
.then((value) {
print("!!!!!!!!!!!"+value);
});
},
),
],
),
floatingActionButton:FloatingActionButton(
child:Text("跳转"),
onPressed: () => {Navigator.pushNamed(context, "two")},
),
),
);
}
}
```
TwoPage
```
class TwoPage extends StatefulWidget {
@override
StatecreateState() {
return TwoPageState();
}
}
class TwoPageStateextends State {
@override
Widgetbuild(BuildContext context) {
var string = ModalRoute.of(context).settings.arguments;
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("two 页面"),
),
body:Center(
child:Column(
children: [
Text(
string ??"",
style:TextStyle(
color: Colors.red,
fontSize:18,
),
),
Divider(
height:2,
color: Colors.black,
),
RaisedButton(
child:Text("返回上个页面"),
onPressed: () {
Navigator.pop(context);
},
),
RaisedButton(
child:Text("返回上个页面,传递参数"),
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
floatingActionButton:FloatingActionButton(
child:Text("跳转"),
onPressed: () => {},
),
),
);
}
}
```
ThreePage
```
class ThreePage extends StatefulWidget {
static const routerName ="threepage";
Stringtext;
ThreePage({this.text});
@override
StatecreateState() {
return ThreePageState(text:text);
}
}
class ThreePageStateextends State {
Stringtext;
ThreePageState({this.text});
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("第三个页面"),
),
body:Center(
child:Text("来自第一个页面的数据${text}"),
),
),
);
}
}
``
FourPage
```
class FourPage extends StatefulWidget{
@override
StatecreateState() {
return FourPageState();
}
}
class FourPageStateextends State{
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("第四个页面"),
),
body:RaisedButton(
child:Text("返回，带回数据"),
onPressed: (){
Navigator.of(context).pop("我是从第四个页面返回带回来的信息");
},
),
),
);
}
}
```
