需求：
今天為大家介紹一下Flutter是如何進(jìn)行頁面跳轉(zhuǎn)驾胆，路由管理的。
一只壳、基本路由
1俏拱、基本路由使用
假設(shè)我們需要從A頁面跳轉(zhuǎn)到basic頁面暑塑，則我們需要在A頁面引入
import '../basic.dart';
然后在A頁面通過以下方法跳轉(zhuǎn)：
RaisedButton(
child: Text("跳轉(zhuǎn)到基本路由頁面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(BuildContext context){
return basic();
}
)
);
},
color: Colors.blue
),
2吼句、基本路由傳值
還是一樣在A頁面引入
import '../basic.dart';
然后在A頁面通過以下方法跳轉(zhuǎn)：
RaisedButton(
child: Text("跳轉(zhuǎn)到基本路由頁面并傳值"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(BuildContext context){
return basic(content:"傳遞過去的值為666");
}
)
);
},
color: Colors.blue
),
二、命名路由
1事格、命名路由抽離到一個(gè)文件中
新建一個(gè)Routes.dart的文件
import 'package:flutter/material.dart';
import '../pages/routeJmp/transmit.dart';
//配置路由
final routes={
'/transmit':(context,{arguments})=> transmit(content:arguments),
};
//固定寫法
var onGenerateRoute=(RouteSettings settings) {
// 統(tǒng)一處理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
2惕艳、跳轉(zhuǎn)參數(shù)
RaisedButton(
child: Text("跳轉(zhuǎn)到命名路由頁面"),
onPressed: (){
//路由跳轉(zhuǎn)
Navigator.pushNamed(context, '/transmit');
},
color: Colors.blue
),
RaisedButton(
child: Text("跳轉(zhuǎn)到命名路由頁面并傳值"),
onPressed: (){
//路由跳轉(zhuǎn)
Navigator.pushNamed(context, '/transmit',arguments:"，傳值結(jié)果為666");
},
color: Colors.blue
),
3驹愚、接收參數(shù)
import 'package:flutter/material.dart';
class transmit extends StatefulWidget {
String content;
transmit({this.content});
@override
_transmitState createState() => _transmitState();
}
class _transmitState extends State<transmit> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("這是命名路由頁面${widget.content!=null?widget.content:""}",style: TextStyle(fontSize:15),),
),
body: ListView(
children: [
],
),
);
}
}
4远搪、命名路由返回上一頁的用法
Navigator.of(context).pop();
調(diào)用該方法可以返回上一頁
4、命名路由如何替換路由
Navigator.of(context).pushReplacementNamed('/transmitTwo');
調(diào)用該方法可以關(guān)閉當(dāng)前頁面逢捺，并跳轉(zhuǎn)到你需要的頁面
5谁鳍、返回根路由
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context) => new Home()), (route) => route == null );
關(guān)閉當(dāng)前所有頁面，返回到根頁面或者打開指定頁面劫瞳，Home()是我這個(gè)項(xiàng)目的根頁面倘潜。
基礎(chǔ)篇
Flutter之實(shí)現(xiàn)生成二維碼，掃描二維碼——Flutter基礎(chǔ)系列
Flutter之基本路由志于，命名路由跳轉(zhuǎn)涮因，返回上一頁，替換路由和返回根路由——Flutter基礎(chǔ)系列
