js實現頁面跳轉的幾種方法，Futter基礎第9篇： 實現頁面跳轉、跳轉傳值（命名路由、命名路由傳值）

效果圖：

Home.dart

Product.dart

ProductInfo.dart

底部導航基本框架參考：flutter實現底部導航

其他按鈕界面參考上一節：flutter實現頁面跳轉、跳轉傳值（普通路由、普通路由傳值）

我先把所有相關的文件夾與文件頁面位置截圖給你們看，方便你們理解，其他重復代碼你們參考上面兩個章節去學習一下，就會了，加油，各位！

js實現頁面跳轉的幾種方法？



然后，我這里就直接貼命名路由的相關代碼了：

main.dart 修改

import 'package:flutter/material.dart';import 'routes/Routes.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(initialRoute: '/',  //初始化的時候加載的路由
//        home: Tabs(),      //將代碼全部抽離出去成一個Tabs組件，再抽離成一個初始化路由組件，在上方       initialRoute: '/',//配置命名路由onGenerateRoute: oonGenerateRoute //將抽離出去的路由傳值規范賦值給左邊，而不是執行，記住喔！);}
}

Home.dart

import 'package:flutter/material.dart';
import '../Search.dart';class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[RaisedButton(child: Text('跳轉到搜索頁面'),onPressed: (){    //監聽器//命名路由跳轉Navigator.pushNamed(context, '/search',arguments: { //我們必須要用arguments 工具來攜帶id這個鍵，才能在那邊取出值"id":123});},color: Theme.of(context).accentColor,textTheme: ButtonTextTheme.primary,),SizedBox(height: 20,),RaisedButton(child: Text('跳轉到商品頁面'),onPressed: (){    //監聽器//命名路由跳轉Navigator.pushNamed(context, '/product');},color: Theme.of(context).accentColor,textTheme: ButtonTextTheme.primary,),],);}
}

Routes.dart

import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Tabs.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';import 'package:flutter/material.dart';//配置路由
final  routes={                   //配置命名路由'/':(context)=>Tabs(),  //命名路由傳值 arguments工具是必須的'/form':(context)=>FormPage(),'/product':(context)=>ProductPage(),  //命名路由傳值 arguments工具是必須的'/productInfoPage':(context,{arguments})=>ProductInfoPage(arguments:arguments),  //命名路由傳值 arguments工具是必須的'/search':(context,{arguments})=>SearchPage(arguments:arguments)  //命名路由傳值 arguments工具是必須的
};//固定寫法
var oonGenerateRoute=(RouteSettings settings) {// 統一處理final String name = settings.name;    //得到命名路由的名字，例如：'/form'final Function pageContentBuilder = routes[name];  //得到命名路由的鍵去獲取值，例如：(context)=>FormPage(),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;}}
};

Tabs.dart不變

vue的路由跳轉？

Product.dart

import 'package:flutter/material.dart';class ProductPage extends StatefulWidget {@override_ProductPageState createState() => _ProductPageState();
}class _ProductPageState extends State<ProductPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('商品詳情'),),body: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[RaisedButton(child: Text('跳轉到商品詳情'),onPressed: (){    //監聽器Navigator.pushNamed(context, '/productInfoPage',arguments: {'pid':456});},color: Theme.of(context).accentColor,textTheme: ButtonTextTheme.primary,),],),);}
}

ProductInfo.dart

import 'package:flutter/material.dart';class ProductInfoPage extends StatefulWidget {final Map arguments;ProductInfoPage({Key key,this.arguments}) : super(key: key);@override_ProductInfoPageState createState() => _ProductInfoPageState(arguments:this.arguments);
}class _ProductInfoPageState extends State<ProductInfoPage> {Map arguments;_ProductInfoPageState({this.arguments});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('商品詳情'),),body:  Container(child: Text('pid=${arguments['pid']}'),),);}
}