main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/Search.dart'; import 'routes/Routes.dart';
void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
initialRoute: '/',
onGenerateRoute: onGenerateRoute
);
}
}

Product.dart

import 'package:flutter/material.dart';

class ProductPage extends StatefulWidget {
ProductPage({Key key}) : super(key: key); _ProductPageState createState() => _ProductPageState();
} class _ProductPageState extends State<ProductPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('商品页面'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('跳转到商品详情页面'),
onPressed: () {
Navigator.pushNamed(context, '/productinfo',
arguments: {"pid":});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary),
],
));
}
}

ProductInfo.dart

import 'package:flutter/material.dart';
class ProductInfoPage extends StatefulWidget {
Map arguments;
ProductInfoPage({Key key,this.arguments}) : super(key: key); _ProductInfoPageState createState() => _ProductInfoPageState(arguments:this.arguments);
} class _ProductInfoPageState extends State<ProductInfoPage> {
Map arguments;
_ProductInfoPageState({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('商品详情页面'),
),
body: Text("这是一个商品详情页面pid=${arguments["pid"]}")
);
}
}

Routes.dart

import 'package:flutter/material.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Tabs.dart'; final routes = {
'/': (context) => Tabs(),
'/form': (context) => FormPage(),
'/product': (context) =>ProductPage(),
'/productinfo': (context, {arguments}) =>ProductInfoPage(arguments: arguments),
'/search': (context, {arguments}) => SearchPage(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;
}
}
};

Home.dart

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: (){
Navigator.pushNamed(context,'/search',arguments: {
"id":
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
),
RaisedButton(
child: Text('跳转到商品页面'),
onPressed: (){
Navigator.pushNamed(context,'/product');
}
)
],
);
}
}

17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。的更多相关文章

  1. 【ASP.NET MVC】 路由机制:命名路由

    首先看一下命名路由和没有命名的差别: 命名路由: routes.MapRoute( name: "Test", // Route name url: "code/p/{a ...

  2. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  3. Django路由系统-URL命名&URL反向解析

    命名URL和URL反向解析 前言 起始样式,HTML中的href是写死的,不能更改,如下示例代码: # urls中 urlpatterns = [ url(r'^admin/', admin.site ...

  4. Django路由系统-分组命名匹配

    Django路由系统 分组命名匹配 ​ 在上述基本配置示例中,使用了简单的正则表达式分组匹配来捕获URL中的值并以位置参数的形式传递给视图,例如url(r'^articles/([0-9]{4})/( ...

  5. 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器

    一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...

  6. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. .NetCore MVC中的路由(1)路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  8. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  9. 利用Windows 2003系统中实现两个网段的路由

    利用Windows 2003系统中实现两个网段的路由 当一个局域网中存在两个以上网段时,分属于不同网段内的主机彼此互不可见.为了解决这个问 题,就必须在不同的网段之间设置路由器.如果花费上万元资金购买 ...

  10. angularjs中使用锚点,angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

随机推荐

  1. visual studio调试exe程序

    标题:How to debug and profile any EXE with Visual Studio 文章:https://devblogs.microsoft.com/visualstudi ...

  2. JSON 的简介与使用

    一.什么是JSON? JSON(javascript object notation)全称是 javascript 对象表示法,是一种数据交换的文本格式,用于读取结构化数据,提出目的是取代繁琐笨重的 ...

  3. 详细讲解vue.js里的父子组件通信(props和$emit)

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  4. 16 关于webpack和npm中几个问题的说明

    1.json里面不能写注释 2.'webpack-dev-server'不是内部或外部命令,也不是可运行的程序或批处理文件. 注意:webpack-dev-server包只需要本地安装就行,不用全局安 ...

  5. jquery左划出现删除按钮,右滑隐藏

    jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...

  6. JavaScript是如何工作的01:引擎,运行时和调用堆栈的概述!

    概述 几乎每个人都已经听说过 V8 引擎,大多数人都知道 JavaScript 是单线程的,或者它使用的是回调队列. 在本文中,我们将详细介绍这些概念,并解释 JavaScrip 实际如何运行.通过了 ...

  7. PHP 根据域名和IP返回不同的内容

    遇到一个好玩的事情,访问别人的IP和别人的域名返回的内容竟然不一样.突然觉得很好玩,也很好奇.自己研究了一下下,就简单写一下吧~ 一个IP和一个域名, 先讲一下公网IP没有绑定域名,但是可以通过一个没 ...

  8. HttpURLConnection getInputStream 400异常的解决

    判断getResponseCode,当返回不是HttpURLConnection.HTTP_OK, HttpURLConnection.HTTP_CREATED, HttpURLConnection. ...

  9. LibreOJ #6217. 扑克牌

    二次联通门 : LibreOJ #6217. 扑克牌 /* LibreOJ #6217. 扑克牌 背包.... 回到家之后简直了...sb题想半天 */ #include <cstdio> ...

  10. 「CF235E」Number Challenge「莫比乌斯反演」

    一个结论:(从二维扩展来的,三维也是对的,证明可以考虑质因数分解) \[ d(ijk)=\sum_{i'|i}\sum_{j'|j}\sum_{k'|k}[\gcd(i',j')=1][\gcd(i' ...