本文地址：https://blog.csdn.net/qq_40785165/article/details/116900126,轉載需附上此地址

大家好，我是小黑，一個還沒禿頭的程序員~~~

你多學一樣本事，就少說一句求人的話！

說實話，學的時候真痛苦，與原生Android還是有區別的，但是畢竟是一種趨勢，學到就是賺到，今天分享的是Flutter中的路由，開發中可以利用這個進行頁面跳轉。效果如圖：

源碼地址：https://gitee.com/fjjxxy/flutter-study.git

（一）先介紹基本的路由，沒有對路由進行管理，直接引入頁面組件，使用push/pop進行跳轉/返回,對應demo中的首頁跳轉到第二個頁面，RaisedButton是按鈕，設置了點擊事件以及內部組件，代碼如下，

RaisedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) {return SecondPage(arguments: {"id":1},);}));}, //這個屬性不能為空，不然背景顏色無效child: Text("路由",style: TextStyle(color: Colors.white),),color: Colors.red,)

（二）基本路由跳轉傳值，通過定義構造函數進行傳值，上面的代碼中已進行傳值，參數名為arguments，值為1；對應Demo中第二個頁面的構造方法中的arguments可選參數，代碼如下：

import 'package:flutter/material.dart';class SecondPage extends StatefulWidget {final arguments;SecondPage({Key key, this.arguments}) : super(key: key);@override_SecondPageState createState() => _SecondPageState(arguments: this.arguments); }class _SecondPageState extends State<SecondPage> {Map arguments;_SecondPageState({this.arguments});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Content(arguments: arguments,),),appBar: AppBar(title: Text("第二個頁面"),),);} }class Content extends StatelessWidget {Map arguments;Content({this.arguments});@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text("這是第二個頁面:id=${arguments["id"]}"),RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third");},child: Text("命名路由跳轉第三個頁面"),)],);} }

（三）命名路由，對所有的路由進行管理，使用Map中的key進行跳轉，Demo中除了上例中的跳轉之外，其他使用的都是命名路由，首先先定義一個路由文件，對路由的路徑以及配置進行統一管理，代碼如下：

Routes.dart

import 'package:flutter/material.dart'; import 'MainPage.dart'; import 'SecondPage.dart'; import 'ThirdPage.dart'; import 'ForthPage.dart';//管理路由,main.dart直接導入這個路由管理就行 //arguments代表跳轉時傳的值 final routes = {'/': (context) => MainPage(), //配置根目錄,默認首頁'/second': (context, {arguments}) => SecondPage(arguments: arguments),'/third': (context) => ThirdPage(),'/forth': (context, {arguments}) => ForthPage(arguments: arguments), };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;}} };

接著在main.dart中設置廚師路由以及路由配置，代碼如下：

import 'package:flutter/material.dart';import 'Routes.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//設置完命名路由不能只是熱加載，要重新運行,真的氣！//路由頁面不能用MaterialApp包裹，不然沒有返回鍵//跳轉的時候構造方法中沒有接收參數就別傳參數，會報錯initialRoute: "/",//初始路由，首頁onGenerateRoute: onGenerateRoute,//路由的配置theme: ThemeData(primarySwatch: Colors.red),);} }

?跳轉代碼如下，Demo中為頁面二跳轉頁面三：

RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third");},child: Text("命名路由跳轉第三個頁面"),)

?如果需要傳值，可以按照上例基本路由中，給下個頁面組件定義帶參數的構造方法，并在跳轉的方法中添加參數arguments，獲取傳值的方法與基本路由一致，使用$獲取即可，如下代碼所示：

RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third",arguments: {"id":1});},child: Text("命名路由跳轉第三個頁面"),)

（四） 返回的代碼如下：

RaisedButton(onPressed: () {Navigator.pop(context);},child: Text("普通返回"),)

?(五)講完了普通的路由跳轉，還有其他幾個跳轉Api介紹一下：

（1）替換路由：Navigator.pushReplacementNamed

適用場景：Page1->Page2->Page3->Page4,這個時候返回到Page2，而不是Page3，這個時候需要在Page3跳轉到Page4的時候把Page3的路由替換，這樣返回的時候就變成了返回到Page2，傳值依然可以用定義帶參構造方法來實現，代碼如下：

RaisedButton(onPressed: () {Navigator.pushReplacementNamed(context, "/forth", arguments: {"content":"替換路由會加載下一個頁面并讓下一個頁面替換當前的路由,\n即page1->page2->page3(這時候替換路由并跳轉)->page4,這時候返回會回到page2,因為page3被替換了"});},child: Text("替換路由并跳轉到第四個頁面,返回到第二個頁面"),)

（2）清除之前的路由直到你想要的舊頁面：

Navigator.pushNamedAndRemoveUntil 適用于命名路由

Navigator.pushAndRemoveUntil 適用于基本路由

?適用場景：直接返回到某操作的開始頁面或者App首頁，這個Api可以在跳轉中清除之前的路由，直到你設置的終點頁面，代碼如下：

RaisedButton(onPressed: () {//這種方式用構造方法傳值，適用于基本路由跳轉// Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context)=> MainPage()), (route) => false);//這種方式可以用arguments參數傳值，適用于命名路由跳轉//第三個參數為true->可以返回，false->無法返回Navigator.pushNamedAndRemoveUntil(context, "/", (route) => false);},child: Text("移除之前的路由并返回"),)

（六）注意事項?

注意事項： 1.設置完命名路由不要只是熱加載，報錯的時候可以重新運行試試,真的氣！ 2.路由頁面不能用MaterialApp包裹，不然沒有返回鍵 3.跳轉的時候構造方法中沒有接收參數就別傳參數，會報錯

到此為止，Flutter的路由跳轉就介紹完畢了，還是有些坑的，需要多嘗試多總結，源碼地址，最后，希望喜歡我文章的朋友們可以幫忙點贊、收藏、評論，也可以關注一下，如果有問題可以在評論區提出，后面我會持續更新Flutter的學習記錄，與大家分享，謝謝大家的支持與閱讀!

總結

以上是生活随笔為你收集整理的Flutter学习日记之使用路由进行页面切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。