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,});@overrideState<SearchPage> createState() => _SearchPageStateState();
}class _SearchPageStateState extends State<SearchPage> {@overridevoid initState() {super.initState();}@overrideWidget 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});@overrideWidget 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,});@overrideState<FormPage> createState() => _FormPageStateState();
}class _FormPageStateState extends State<FormPage> {@overridevoid initState() {super.initState();}@overrideWidget 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。