17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。
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中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。的更多相关文章
- 【ASP.NET MVC】 路由机制:命名路由
首先看一下命名路由和没有命名的差别: 命名路由: routes.MapRoute( name: "Test", // Route name url: "code/p/{a ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Django路由系统-URL命名&URL反向解析
命名URL和URL反向解析 前言 起始样式,HTML中的href是写死的,不能更改,如下示例代码: # urls中 urlpatterns = [ url(r'^admin/', admin.site ...
- Django路由系统-分组命名匹配
Django路由系统 分组命名匹配 在上述基本配置示例中,使用了简单的正则表达式分组匹配来捕获URL中的值并以位置参数的形式传递给视图,例如url(r'^articles/([0-9]{4})/( ...
- 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器
一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- .NetCore MVC中的路由(1)路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- 利用Windows 2003系统中实现两个网段的路由
利用Windows 2003系统中实现两个网段的路由 当一个局域网中存在两个以上网段时,分属于不同网段内的主机彼此互不可见.为了解决这个问 题,就必须在不同的网段之间设置路由器.如果花费上万元资金购买 ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
随机推荐
- TCP/IP结构图
IP: TCP: UDP:
- 拦截器(Interceptor)和过滤器(Filter)的执行顺序和区别
一.引言 本来想记录一下关于用户登陆和登陆之后的权限管理.菜单管理的问题,想到解决这个问题用到Interceptor,但想到了Interceptor,就想到了Filter,于是就想说一下它们的执行顺序 ...
- 设计模式之命令模式-JS
理解命令模式 假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜.我们 ...
- STM32F10XX学习笔记的石墨连接
https://shimo.im/docs/QHGRrWxbeb0NiBm9/ <STM32F10X系列笔记>,可复制链接后用石墨文档 App 打开
- [RxJS] Convert a Node.js style callback to Observable: bindNodeCallback
It's just like bindCallback, but the callback is expected to be of type callback(error, result). imp ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- sql server 标量函数的用法
函数的内容是把汉字转换成拼音 select dbo.uf_GetSpellCode( book_class) from BOOK_MSG
- IDEA2018创建SpringBoot无法连接https://start.spring.io
这是由于spring-boot需要访问https://start.spring.io外网,但是由于国内的局域网限制导致的. 解决办法: 进入到IDEA的setting 搜索 HTTP Proxy 选择 ...
- java获取远程服务器应用程序服务状态
package lct.conference.test; import java.io.BufferedReader; import java.io.IOException; import java. ...
- Apache的安装和配置
一.官网下载Apache 官网地址:https://httpd.apache.org/ 点击Download--->点击Files for Microsoft Windows--->点击A ...