Flutter页面跳转
flutter页面跳转分为以下几种情况
1、普通跳转
2、通过路由跳转
---2.1、跳转的类构造函数不带参数
---2.2、跳转的类构造函数带参数
1、普通跳转(传递参数:通过构造器直接传递即可)
//导航到新路由
void _jumpAboutPage(BuildContext context) {
//第一种写法:
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) {
//不携带参数
return NewRoute();
//携带参数(例如带一个字符串参数)
//return NewRoute("abc");
}
)
);
}
void _jumpAboutPage(BuildContext context) {
//第二种写法:
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
//不携带参数
return NewRoute();
//携带参数(例如带一个字符串参数)
//return NewRoute("abc");
}),
);
}
2、路由方式
1、构造函数不带参数
例如跳转到如下页面:
import 'package:flutter/material.dart';
class NewRouter extends StatelessWidget {
//设置该页面路由名称字符串常量
static const routeName = "/newRouter";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("新页面"),
),
body: Center(
child: Text(_content),
),
);
}
}
那么router注册在入口Widget -> MaterialApp的routes属性里
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
//关键代码在这里,注册路由
routes: {
NewRouter.routeName : (cts) => NewRouter()
},
//可以通过这种路由方式设置APP首次进入的页面
initialRoute: NewRouter.routeName,
);
}
}
//跳转地方的代码
void _jumpAboutPage(BuildContext context) {
Navigator.pushNamed(context, NewRouter.routeName);
}
注意:虽然构造函数中没有带参数,但是我们通过上面的方式跳转页面的时候仍然可以携带值
方法是:
Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");
跳转页获取数据的方式:在build方法中通过下面方法获取
String _content = ModalRoute.of(context)?.settings.arguments as String;
2、构造函数带参数
例如跳转到如下页面:
import 'package:flutter/material.dart';
class NewRouter extends StatelessWidget {
//设置该页面路由名称字符串常量
static const routeName = "/newRouter";
String _content;
//构造函数带参数
NewRouter(this._content);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("新页面"),
),
body: Center(
child: Text(_content),
),
);
}
}
那么router注册在入口Widget -> MaterialApp的onGenerateRoute属性里(原理:这里是一个钩子,当我们使用的路由在router属性中没有注册,则会在onGenerateRoute里查找)
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 在这里设置带参构造函数的路由
onGenerateRoute: (settings) {
if (settings.name == NewRouter.routeName) {
return MaterialPageRoute(
builder: (ctx) {
//这里是传送携带的参数,这里是传String,所以转String了
return NewRouter(settings.arguments as String);
}
);
}
return null;
},
);
}
}
//跳转地方的代码
void _jumpAboutPage(BuildContext context) {
Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");
}
总结:
1、跳转分普通跳转和路由跳转
2、普通跳转通过构造方法参数传值
3、路由跳转方式,根据构造方法是否有参数要区分是在routes
属性(不带参数)中注册还是onGenerateRoute
属性(带参数)中处理
4、跳转的方法都是Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");
不传值的话就去掉arguments:
5、接收传值的方式,要么是通过构造方法传过来的,要么就是通过String _content = ModalRoute.of(context)?.settings.arguments as String;
获取
6、页面返回都是通过Navigator.of(context).pop();
可在pop()括号中添加返回页面时需要携带的数据