Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）

效果图：

Home.dart

Product.dart

ProductInfo.dart

底部导航基本框架参考：flutter实现底部导航

其他按钮界面参考上一节：flutter实现页面跳转、跳转传值（普通路由、普通路由传值）

我先把所有相关的文件夹与文件页面位置截图给你们看，方便你们理解，其他重复代码你们参考上面两个章节去学习一下，就会了，加油，各位！

然后，我这里就直接贴命名路由的相关代码了：

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不变

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']}'),),);}
}

Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）相关推荐

Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
phpstudy mysql创建表_MySQL_Mysql入门基础数据库创建篇，1.创建数据表---基础（高手跳 - phpStudy...
Mysql入门基础数据库创建篇 1.创建数据表---基础(高手跳过) 正统方法:create [TEMPORARY] table 表名 [if not exists] (创建的列项定义) [表的选项 ...
JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
vue教程提示:Vue3系列请参考Vue2+Vue3小白零基础教程-vue3篇文章,本文为vue2篇. 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么一套用于构建用户界面的渐进式J ...
HTML（html5）-----学习（基础笔记总结篇）
-预备内容:-软件安装篇 1.记笔记工具----typroa 文件名:为了区分计算机中的不同文件,而给每个文件设定一个指定的名称.由基本文件名(文件主名)和扩展名组成. eg:SDN.docx 销售统 ...
《精通QTP——自动化测试技术领航》—第1章1.5节QTP精华—对象库（上）之基础攻略篇...
本节书摘来自异步社区<精通QTP--自动化测试技术领航>一书中的第1章1.5节QTP精华-对象库(上)之基础攻略篇,作者余杰 , 赵旭斌,更多章节内容可以访问云栖社区"异步社区& ...
python turtle基本语法_Python 基础语法-turtle篇
Python 基础语法-turtle篇今天这节课主要讲了类的概念,并引出turtle中的函数和Turtle类. -创建一个Turtle类:brad=turtle.Turtle() -定义Turtle ...
算法之基础数论应用篇(一)
基础数论应用篇子集和题目描述筛质数筛质数模板欧拉筛线性筛哥德巴赫猜想夏洛克和他的女朋友二次筛法分解质因数试除法分解质因数分解阶乘质因子快速幂模板快速幂快速乘法序列的第 ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...

Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）

Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）相关推荐

最新文章

热门文章

Futter基础第9篇： 实现页面跳转、跳转传值（命名路由、命名路由传值）

Futter基础第9篇： 实现页面跳转、跳转传值（命名路由、命名路由传值）相关推荐

最新文章

热门文章

Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）

Futter基础第9篇：实现页面跳转、跳转传值（命名路由、命名路由传值）相关推荐