flutter頁面跳轉分為以下幾種情況
1疟游、普通跳轉
2、通過路由跳轉
---2.1痕支、跳轉的類構造函數(shù)不帶參數(shù)
---2.2颁虐、跳轉的類構造函數(shù)帶參數(shù)
1、普通跳轉(傳遞參數(shù)：通過構造器直接傳遞即可)
//導航到新路由
void _jumpAboutPage(BuildContext context) {
//第一種寫法：
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) {
//不攜帶參數(shù)
return NewRoute();
//攜帶參數(shù)(例如帶一個字符串參數(shù))
//return NewRoute("abc");
}
)
);
}
void _jumpAboutPage(BuildContext context) {
//第二種寫法：
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
//不攜帶參數(shù)
return NewRoute();
//攜帶參數(shù)(例如帶一個字符串參數(shù))
//return NewRoute("abc");
}),
);
}
2采转、路由方式
1聪廉、構造函數(shù)不帶參數(shù)
例如跳轉到如下頁面：
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);
}
注意：雖然構造函數(shù)中沒有帶參數(shù)故慈，但是我們通過上面的方式跳轉頁面的時候仍然可以攜帶值
方法是:
Navigator.pushNamed(context, NewRouter.routeName,arguments: "攜帶的參數(shù)，這里是String框全，可以傳Object類型");
跳轉頁獲取數(shù)據(jù)的方式：在build方法中通過下面方法獲取
String _content = ModalRoute.of(context)?.settings.arguments as String;
2察绷、構造函數(shù)帶參數(shù)
例如跳轉到如下頁面：
import 'package:flutter/material.dart';
class NewRouter extends StatelessWidget {
//設置該頁面路由名稱字符串常量
static const routeName = "/newRouter";
String _content;
//構造函數(shù)帶參數(shù)
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,
),
// 在這里設置帶參構造函數(shù)的路由
onGenerateRoute: (settings) {
if (settings.name == NewRouter.routeName) {
return MaterialPageRoute(
builder: (ctx) {
//這里是傳送攜帶的參數(shù)拆撼，這里是傳String，所以轉String了
return NewRouter(settings.arguments as String);
}
);
}
return null;
},
);
}
}
//跳轉地方的代碼
void _jumpAboutPage(BuildContext context) {
Navigator.pushNamed(context, NewRouter.routeName,arguments: "攜帶的參數(shù)喘沿，這里是String闸度，可以傳Object類型");
}
總結：
1、跳轉分普通跳轉和路由跳轉
2蚜印、普通跳轉通過構造方法參數(shù)傳值
3莺禁、路由跳轉方式，根據(jù)構造方法是否有參數(shù)要區(qū)分是在routes屬性（不帶參數(shù)）中注冊還是onGenerateRoute屬性（帶參數(shù)）中處理
4窄赋、跳轉的方法都是Navigator.pushNamed(context, NewRouter.routeName,arguments: "攜帶的參數(shù)哟冬，這里是String楼熄，可以傳Object類型");不傳值的話就去掉arguments:
5、接收傳值的方式浩峡，要么是通過構造方法傳過來的可岂，要么就是通過String _content = ModalRoute.of(context)?.settings.arguments as String;獲取
6、頁面返回都是通過Navigator.of(context).pop();可在pop()括號中添加返回頁面時需要攜帶的數(shù)據(jù)
