一 基本路由
路由就是页面的跳转，通过Navigator组件管理路由导航
Flutter 提供了两种方式 基本路由和命名路由
Container(
child: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
// 跳转到购物车界面
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return SearchPage();
}));
},
child: Text("Jump to Search Page")),
ElevatedButton(
onPressed: () {
// 跳转到购物车界面并且传值
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return FormPage(title: "title from home");
}));
},
child: Text("Jump to Search Page with Parameters"))
],
)),
)import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
const SearchPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页面")),
body: Center(
child: Text("SearchPage"),
),
);
}
}
import 'package:flutter/material.dart';
class FormPage extends StatelessWidget {
// 接收传递过来的值
String title;
FormPage({this.title = "Form"});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("This is form page"),
),
body: Text(title),
// 返回的操作
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Back"),
),
);
}
}
二 命名路由基本使用
在大项目中统一管理路由，
在main 文件中统一去配置路由
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Tabs(title: "这是一首简单的小情歌"),
// map类型
routes: {
'/form': (context) => FormPage(),
'/search': (context) => SearchPage()
},
);ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/search");
},
child: Text("Jump to Search Page")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/form");
},
child: Text("Jump to Search Page with Parameters"))三 路由传递参数的基本使用
1 首先在main 中配置好路由
其中 onGenerateRoute 为固定的写法
class MyApp extends StatelessWidget {
// This widget is the root of your application.
final routes = {
"/form": (context) => FormPage(),
"/search": (context, {arguments}) => SearchPage(arguments: arguments)
};
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Tabs(title: "title"),
// map类型
// initialRoute: '/',
// 路由传值
onGenerateRoute: (RouteSettings settings) {
//String? 表示name为可空类型
final String? name = settings.name;
//Function? 表示pageContentBuilder为可空类型
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 在对应的页面写好接收的参数
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
final arguments;
SearchPage({this.arguments});
@override
State<SearchPage> createState() => _SearchPageState(arguments: arguments);
}
class _SearchPageState extends State<SearchPage> {
final arguments;
_SearchPageState({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页面")),
body: Center(
child: Text(
"SearchPage + ${this.arguments != null ? this.arguments["id"] : "emptyBoy"}"),
),
);
}
}
3 跳转操作
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/search", arguments: {"id": 123});
},
child: Text("Jump to Search Page")),四 路由文件的抽取配置
1 单独新建一个Routes.dart ，专门配置路由
import 'package:flutter/material.dart';
import '../pages/tabs/Form.dart';
import '../pages/tabs/Search.dart';
import '../pages/tabs/Tabs.dart';
//配置路由,定义Map类型的routes,Key为String类型，Value为Function类型
final Map<String, Function> routes = {
'/': (context) => Tabs(),
'/form': (context) => FormPage(),
'/search': (context, {arguments}) => SearchPage(arguments: arguments),
};
//固定写法
var onGenerateRoute = (RouteSettings settings) {
//String? 表示name为可空类型
final String? name = settings.name;
//Function? 表示pageContentBuilder为可空类型
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 在main 中进行引入并且调用
import 'routes/Routes.dart';
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Tabs(),
// map类型
initialRoute: '/',
// 路由传值
onGenerateRoute: onGenerateRoute,
);
五 替换路由
这样的示例，从首页跳转到登录页面，从登录页面跳转到注册页面1，从注册页面跳转到注册页面2，完成之后返回首页。这时候要用到替换路由的方式push
ElevatedButton(
onPressed: () {
Navigator.of(context).pushReplacementNamed("/registerFirst");
},
child: Text("下一步"),
)六 返回到跟路由
使用上面的替换路由可以实现返回到根路由，如果不适用的话，用以下的方式进行实现返回到跟路由。
代码的意思是移除所有的路由 创建一个新的路由
ElevatedButton(
child: Text("返回首页"),
onPressed: () {
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => Tabs()),
(route) => false);
})
