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. 刷题小tips

    自从认真做题以后,结合自己的做题体验以及网上前人的总结经验贴,罗列下列的小建议: 1.为了避免每一次都要重复输入测试数据的麻烦,利用输入重定向文件 我是只把标准输入stdin重定位到in.txt,然后 ...

  2. zookeeper学习(2)----zookeeper和kafka的关系

    转载: Zookeeper 在 Kafka 中的作用 leader 选举 和 follower 信息同步 如上图所示,kafaka集群的 broker,和 Consumer 都需要连接 Zookeep ...

  3. js插件---datatable常用配置

    js插件---datatable常用配置 一.总结 一句话总结: datatable常用配置百度一下特别方便 二.jquery datatable 实例操作 转自或参考:jquery datatabl ...

  4. UTF-8&Unicode,0xC0和0x80是什么?

    转载:http://blog.sina.com.cn/s/blog_7c4f3b160101dv4p.html 一个字符串长度统计的代码,如下 int calcLen(const char* _str ...

  5. 解决在jenkins中无法打开robot framework report.html log.html的问题

    问题描述: Opening Robot Framework report failed Verify that you have JavaScript enabled in your browser. ...

  6. Hibernate初探之单表映射——Hibernate概念及插件的安装

    什么是ORM ORM(Object/Relationship Mapping):对象/关系映射 为什么要有ORM? 利用面向对象思想编写的数据库应用程序最终都是把对象信息保存在关系型数据库中,于是要编 ...

  7. go if for while 的使用

    fileName := "a.txt"contents ,err := ioutil.ReadFile(fileName) if err != nil{ fmt.Println(& ...

  8. SQLServer函数 left()、charindex()、stuff()

    SQLServer函数 left().charindex().stuff()的使用 1.left()LEFT (<character_expression>, <integer_ex ...

  9. 洛谷 UVA10298 Power Strings 题解

    Analysis 结论:设字符串长度为n,最长相同前后缀的长度为kmp[i],如n%(n-kmp[n])=0,则答案为n/(n-kmp[n]),否则为1. 如果循环节多于一个,以前n-kmp[n]个为 ...

  10. bzoj 2111: [ZJOI2010]Perm 排列计数 Lucas

    题意:称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很大, ...