Flutter路由的几种用法小结

扶莺语 · 发表于 2024-4-11 13:46:06

Flutter路由跳转
基本路由跳转
返回上一页路由
基本路由跳转传参
命名路由跳转
命名路由跳转需要先配置路由
命名路由跳转传参
命名路由替换跳转
移除所有页面返回到根页面

Flutter路由跳转

基本路由跳转

ElevatedButton(
onPressed: () {
//基本路由跳转
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const SearchPage();
}),
);
},
child: const Text("基本路由跳转"),
),

复制代码

search.dart页面

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
final String context;
final int aid;
const SearchPage({
super.key,
this.context = "",
this.aid = 0,
});
@override
State<SearchPage> createState() => _SearchPageStateState();
}
class _SearchPageStateState extends State<SearchPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
//返回到上一页路由
Navigator.pop(context);
},
child: const Icon(Icons.close),
),
appBar: AppBar(
title: const Text("搜索页面"),
),
body: Center(
child: Text(
"${widget.context} "
"${widget.aid == 0 ? "" : ",代号：${widget.aid}"}"
),
),
);
}
}

复制代码

返回上一页路由

Navigator.pop(context);

复制代码

基本路由跳转传参

ElevatedButton(
onPressed: () {
//基本路由跳转传参
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const SearchPage(
context: "首页传过来的参数", aid: 123456);
}),
);
},
child: const Text("基本路由跳转传参"),
),

复制代码

命名路由跳转

ElevatedButton(
onPressed: () {
//命名路由跳转
Navigator.pushNamed(context, "/search");
},
child: const Text("命名路由跳转"),
),

复制代码

命名路由跳转需要先配置路由

routers.dart配置文件

import 'package:flutter/material.dart';
import 'package:flutter_demo/form.dart';
import 'package:flutter_demo/register2.dart';
import 'package:flutter_demo/search.dart';
//配置路由
Map routes = {
"/search": (context) => const SearchPage(),
"/register2": (context) => const Register2(),
"/form": (context, {arguments}) => FormPage(arguments: arguments),
};
//配置onGenerateRoute固定写法,这个方法相当于一个中间件，可以做权限判断
var onGenerateRoute = (RouteSettings settings) {
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;
}
}
return null;
};

复制代码

然后需要在首页添加initialRoute和onGenerateRoute配置

import 'package:flutter_demo/routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
//隐藏DEBUG图标
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const Scaffold(
body: MyHomePage(),
),
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
);
}
}

复制代码

命名路由跳转传参

ElevatedButton(
onPressed: () {
//命名路由传参
Navigator.pushNamed(
context,
"/form",
arguments: {
"aid": 123456,
"name": "张三",
"age": "18",
},
);
},
child: const Text("命名路由传参"),
),

复制代码

context属性中写配置中的路径，arguments属性中是跳转需要带的参数，跳转到form.dart页面并接收参数。

import 'package:flutter/material.dart';
class FormPage extends StatefulWidget {
final Map arguments;
const FormPage({
super.key,
required this.arguments,
});
@override
State<FormPage> createState() => _FormPageStateState();
}
class _FormPageStateState extends State<FormPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("表单页面"),
),
body: Center(
child: Text(
widget.arguments.isEmpty
? ""
: "我是${widget.arguments["name"]},我${widget.arguments["age"]}了，"
"代号：${widget.arguments["aid"]}",
),
),
);
}
}

复制代码

命名路由替换跳转

Navigator.of(context).pushReplacementNamed("/register2");

复制代码

命名路由替换跳转用pushReplacementNamed，跳转新页面后本页面被替换掉。

移除所有页面返回到根页面

Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (BuildContext context) {
return const MyApp();
}), (route) => false);

复制代码

移除所有页面并返回到指定页面用pushAndRemoveUntil。
到此这篇关于Flutter路由的几种用法的文章就介绍到这了,更多相关Flutter路由跳转内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

王超321 · 发表于 2024-8-3 01:49:07

感谢楼主，顶。

东北瘦丫儿 · 发表于 2024-11-19 11:41:20

路过，支持一下

大蔡五星教学 · 发表于 2024-12-11 05:57:02

顶顶更健康！！！

艾彦露 · 发表于 2025-12-5 14:36:10

感谢楼主分享。

		自动登录	找回密码
密码			立即注册

Flutter路由的几种用法小结

浏览过的版块