Flutter中的普通路由与命名路由(Navigator组件)


基本路由
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "NavigatorWidget",
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SearchPage()
)
);
},
),
)
);
}
}
class SearchPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页面")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("这是搜索页面"),
RaisedButton(
child: Text("返回上一页"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
);
}
}
基本路由+传参
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "NavigatorWidget",
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SearchPage("我是传参")
)
);
},
),
)
);
}
}
class SearchPage extends StatelessWidget {
String param;
SearchPage(this.param);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页面")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("这是传参值:$param"),
RaisedButton(
child: Text("返回上一页"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
);
}
}
命名路由
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "NavigatorWidget",
initialRoute: "/",
routes: {
"/":(context) => HomePage(),
"/search":(context) => SearchPage(),
},
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).pushNamed("/search");
},
),
)
);
}
}
class SearchPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页面")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("这是搜索页面"),
RaisedButton(
child: Text("返回上一页"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
);
}
}
命名路由+传参(最常用的)
import 'package:flutter/material.dart';
void main() {
// 可抽离出去
final routes = {
"/":(context) => IndexPage(),
"/search":(context,{arguments}) => SearchPage(param: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;
}
}
return null;
};
runApp(MaterialApp(
title: "NavigatorWidget",
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
));
}
class IndexPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("主页")),
body: RaisedButton(
child: Text("跳转到搜索页面,传参为'id':123"),
onPressed: () {
Navigator.pushNamed(context, "/search",arguments: {
"id":123
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
);
}
}
class SearchPage extends StatelessWidget {
final Map<String,int> param;
SearchPage({this.param});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("搜索页")),
body: Text("接受到的传参的值为:${param != null ? param["id"] : 0}"),
);
}
}
Flutter中的普通路由与命名路由(Navigator组件)的更多相关文章
- 关于使用vue-router的嵌套路由的命名路由时踩的坑
今天在做我的模仿微博项目时,我想实现点击router-link后,跳转到微博正文页面,并渲染其嵌套视图-评论组件.但是在实际实现时,我发现页面可以正常跳转,但是在页面加载后,并不渲染该页面的嵌套视图, ...
- flutter中的命名路由
命名路由是区别于基本路由的一种存在,方便于大型项目中路由的统一管理,现在,在前面基本路由的项目基础上实现实现命名路由. 使用步骤 路由配置 命名路由在使用前,需要在根组件main.dart中进行简单的 ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- Flutter入门(三)-底部导航+路由
* StatefulWidget 如果想改变页面中的数据就要用到StatefulWidget,之前自定义组件继承的StatelessWidget是不能动态修改页面数据的 //自定义有状态组件 clas ...
- flutter页面间跳转和传参-Navigator的使用
flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...
- Flutter中管理路由栈的方法和应用
原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navig ...
- Flutter 中的路由
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航. 并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.po ...
- Flutter 中的基本路由
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
- tornado中命名路由及反向解析使用
一. 命名路由: 通常路由写法为[ (r'/' , Handler), ... ] 以上路由写法无法实现命名, 使用命名路由需借助tornado提供的方法, 如下: [ tornado.web.url ...
随机推荐
- Jenkins加入systemctl管理
Jenkins安装目录为 /usr/local/jenkins-tomcat/ 添加文档 /usr/lib/systemd/system/jenkins.service [Unit] Descript ...
- iOS-AVPlayer使用
1引入AVFoundation.framework框架 2引入头文件<AVFoundation/AVFoundation.h>,并拖入需要播放的视频文件 代码如下: 自定义播放的View, ...
- python获取昨日日期
获取昨日日期oneday = datetime.timedelta(days=1) 一天 day = datetime.datetime.strptime(self.date,'%Y-%m-%d') ...
- 当你登录Github要求你邮箱验证身份,但是你的邮箱登录不了?
事情发送在两天前,我如标题所示......,它给出的tyningling@163我真的不知道什么时候注册的了,尝试了N个密码登录不上,验证密保吧,看到手机号突然想起来,这是拿以前同学的手机号注册的.. ...
- Go之接口interface(1)
1. 什么是interface在此之前,我们遇到的都是具体的类型,比如数字类型.切片类型等等.对于这些具体的类型,我们总是能知道它是什么.可以利用它来做什么,比如对于一个数字类型,我们知道可以对其进行 ...
- Python 图形库
1. 总体介绍 http://www.cnblogs.com/Vito2008/p/5264291.html 2.pygal http://rfyiamcool.blog.51cto.com/1030 ...
- jira使用一:如何给项目分组、sprint并行、禁止发送消息给atlassian
问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...
- Python视频教程免费分享(2020年最新版)
为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...
- 基于tesseract-OCR进行中文识别
1. 环境准备 1.1 下载 下载Tesseract-OCR安装包,地址为: https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-w32- ...
- 90%程序员都没有完全答对Cookie和Session的区别
我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...