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-11Android 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皮膚更換的方法,即讓用戶(hù)可以自行通過(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í)例