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 ...
随机推荐
- RocketMQ共包含9个模块
rocketmq-common:通用的枚举.基类方法.或者数据结构,包名有admin.consumer.filter.hook.message rocketmq-remoting:使用netty的客户 ...
- var和val的区别
var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和java中声明变量的方式一样. val是一个只读变量,这种声明变量的方式相当于java中的final变量.一个 ...
- Core Data 的线程安全问题
前言: 很多小的App只需要一个ManagedContext在主线程就可以了,但是有时候对于CoreData的操作要耗时很久的,比如App开启的时候要载入大量数据,如果都放在主线程,毫无疑问会阻塞UI ...
- PHP重建数组的索引
sort() array_merge()跟一个空数组合并都可以重建索引数组的键(key)
- ubuntu 18.04安装jdk8和eclipse
JDK8的安装 1.安装ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 2.安装JDK sudo apt-ge ...
- 48.javascript基础学习
javascript基础学习: http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...
- Python小技巧:使用一行命令把你的电脑变成服务器
不知道你有没有遇到这么一种情况,就是你有时候想要把电脑上的一些东西传输到你的手机或者 Pad ,你要么需要使用数据线连接到电脑,有时候还要装各种驱动才可以进行数据传输,要么需要借助第三方的工具,在局域 ...
- MySQL 配置参数优化
MySQL 配置参数优化 1.修改back_log参数值:由默认的50修改为500 back_log=500back_log值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中 ...
- 安全篇-AES/RSA加密机制
在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...
- 【动态规划】Überwatch
Überwatch 题目描述 The lectures are over, the assignments complete and even those pesky teaching assista ...