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的兼容性,想着用锚点实现算 ...
随机推荐
- Vue项目打包发布,配置Nginx
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- 助教培训第四次作业——熟练掌握GitHub及Git的使用方法
助教培训第四次作业——熟练掌握GitHub及Git的使用方法 1.Git 命令的理解和使用 常用的Git命令可以查看官方文档,官方文档的网址:https://git-scm.com/docs .虽然是 ...
- URI和URL、REST
URI和URL URI(Uniform Resource Identifier ) 是一个紧凑的字符串用来标示抽象或物理资源.可以分为URL,URN或同时具备locators 和names特性的一个东 ...
- python_面向对象——双下划线方法
1.__str__和__repe__ class Person(object): def __init__(self,name,age): self.name = name self.age = ag ...
- PL/SQL 子查询
一.概述 在一个SQL语句中嵌套另一个SQL语句成为子查询.包括单行子查询,多行子查询,多列子查询. 注意,当在DDL语句中引用子查询时,可以带有Order By子句:但是当在where子句.Set子 ...
- 前端面试题-JavaScript
引用GitHub 上 ltadpoles的前端面试 https://github.com/ltadpoles 目录 1. JavaScript 有哪些数据类型 2. 怎么判断不同的JS数据类型 ...
- ssh 免密码登录 单机和集群配置
1.在主机上(A)生成密钥对 ssh-keygen -t rsa -P '' #在A主机上执行,生成密钥对 直接按enter键 执行以下命令,会在 ~/.ssh/ 目录生成 id_rsa id_r ...
- sql server 很好的基础练习 <学生表-老师表-课程表-选课表>
表结构 --学生表tblStudent(编号StuId.姓名StuName.年龄StuAge.性别StuSex) --课程表tblCourse(课程编号CourseId.课程名称CourseName. ...
- LSTM-航班人数预测
小书匠深度学习LSTM 郑重声明,文章大部分翻译自: Time Series Prediction with LSTM Recurrent Neural Networks in Python with ...
- org.springframework.expression.spel.SpelEvaluationException: EL1030E
问题与分析 在本地开发项目时发现报错如下: org.springframework.expression.spel.SpelEvaluationException: EL1030E: The oper ...