Flutter路由的幾種用法小結(jié)
Flutter路由跳轉(zhuǎn)
基本路由跳轉(zhuǎn)
ElevatedButton(
onPressed: () {
//基本路由跳轉(zhuǎn)
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const SearchPage();
}),
);
},
child: const Text("基本路由跳轉(zhuǎn)"),
),search.dart頁(yè)面
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: () {
//返回到上一頁(yè)路由
Navigator.pop(context);
},
child: const Icon(Icons.close),
),
appBar: AppBar(
title: const Text("搜索頁(yè)面"),
),
body: Center(
child: Text(
"${widget.context} "
"${widget.aid == 0 ? "" : ",代號(hào):${widget.aid}"}"
),
),
);
}
}返回上一頁(yè)路由
Navigator.pop(context);
基本路由跳轉(zhuǎn)傳參
ElevatedButton(
onPressed: () {
//基本路由跳轉(zhuǎn)傳參
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const SearchPage(
context: "首頁(yè)傳過(guò)來(lái)的參數(shù)", aid: 123456);
}),
);
},
child: const Text("基本路由跳轉(zhuǎn)傳參"),
),命名路由跳轉(zhuǎn)
ElevatedButton(
onPressed: () {
//命名路由跳轉(zhuǎn)
Navigator.pushNamed(context, "/search");
},
child: const Text("命名路由跳轉(zhuǎn)"),
),命名路由跳轉(zhuǎn)需要先配置路由
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固定寫(xiě)法,這個(gè)方法相當(dāng)于一個(gè)中間件,可以做權(quán)限判斷
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;
};然后需要在首頁(yè)添加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圖標(biāo)
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const Scaffold(
body: MyHomePage(),
),
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
);
}
}命名路由跳轉(zhuǎn)傳參
ElevatedButton(
onPressed: () {
//命名路由傳參
Navigator.pushNamed(
context,
"/form",
arguments: {
"aid": 123456,
"name": "張三",
"age": "18",
},
);
},
child: const Text("命名路由傳參"),
),context屬性中寫(xiě)配置中的路徑,arguments屬性中是跳轉(zhuǎn)需要帶的參數(shù),跳轉(zhuǎn)到form.dart頁(yè)面并接收參數(shù)。
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("表單頁(yè)面"),
),
body: Center(
child: Text(
widget.arguments.isEmpty
? ""
: "我是${widget.arguments["name"]},我${widget.arguments["age"]}了,"
"代號(hào):${widget.arguments["aid"]}",
),
),
);
}
}命名路由替換跳轉(zhuǎn)
Navigator.of(context).pushReplacementNamed("/register2");命名路由替換跳轉(zhuǎn)用pushReplacementNamed,跳轉(zhuǎn)新頁(yè)面后本頁(yè)面被替換掉。
移除所有頁(yè)面返回到根頁(yè)面
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (BuildContext context) {
return const MyApp();
}), (route) => false);移除所有頁(yè)面并返回到指定頁(yè)面用pushAndRemoveUntil。
到此這篇關(guān)于Flutter路由的幾種用法的文章就介紹到這了,更多相關(guān)Flutter路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開(kāi)發(fā)中TextView 實(shí)現(xiàn)右上角跟隨文本動(dòng)態(tài)追加圓形紅點(diǎn)
這篇文章主要介紹了android textview 右上角跟隨文本動(dòng)態(tài)追加圓形紅點(diǎn)的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
Android apk完整性檢測(cè)的實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)
這篇文章主要介紹了Android apk完整性檢測(cè)的實(shí)現(xiàn)思路和代碼實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
仿墨跡天氣在Android App中實(shí)現(xiàn)自定義zip皮膚更換
這篇文章主要介紹了仿墨跡天氣在Android App中實(shí)現(xiàn)自定義zip皮膚更換的方法,即讓用戶可以自行通過(guò)自制或者下載的zip皮膚包進(jìn)行換膚,需要的朋友可以參考下2016-02-02
Android中fragment+viewpager實(shí)現(xiàn)布局
android開(kāi)發(fā)基礎(chǔ)教程—SharedPreferences讀寫(xiě)
Android編程實(shí)現(xiàn)網(wǎng)絡(luò)圖片查看器和網(wǎng)頁(yè)源碼查看器實(shí)例

