18Flutter中的路由、路由替换、返回到根路由:
路由:
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');
}
)
],
);
}
}
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.pushReplacementNamed(context, '/productinfo',
// arguments: {"pid":778899}
// );
Navigator.pushNamed(context, '/productinfo',
arguments: {"pid":}
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary),
],
)
);
}
}
ProductInfo.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.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"]}")
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('完成'),
onPressed: () {
// Navigator.of(context).pop(); //返回根:
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context)=>new Tabs(index: )),
(route)=>route==null
);
}
),
],
),
);
}
}
Tabs.dart
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=}) : super(key: key);
_TabsState createState() => _TabsState(this.index);
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
_TabsState(index){
this._currentIndex=index;
}
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
// print(index);
setState(() {
this._currentIndex = index;
});
},
iconSize: 36.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text('设置')),
]),
body: this._pageList[this._currentIndex],
);
}
}
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
);
}
}
18Flutter中的路由、路由替换、返回到根路由:的更多相关文章
- Flutter中的替换路由、返回到根路由
替换路由 当我们有三个页面,页面1,页面2,页面3. 期望点击页面1按钮,跳转到页面2,页面2点击返回,跳转到页面1: 点击页面2按钮,跳转到页面3,页面3点击返回,跳转到页面1,而不是页面2. 这时 ...
- vue中的组件,Component元素,自定义路由,异步数据获取
组件是Vue最强大的功能之一.组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DO ...
- ionic back 返回按钮不正常显示&&二级路由点击返回按钮失效无法返回到上一级页面的问题
很多时候,app不只有一两级路由,还要三四级路由,但是在ionic中,给出的返回键三级或四级无法使用,所以得自定义方法设置返回. 直接贴代码: <ion-nav-buttons side=&qu ...
- 056——VUE中vue-router之路由参数的验证处理保存路由安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring Cloud (十三) Zuul:静态路由、静态过滤器与动态路由的实现
前言 本文起笔于2018-06-26周二,接了一个这周要完成的开发任务,需要先等其他人的接口,可能更新的会慢一些,还望大家见谅.这篇博客我们主要讲Spring Cloud Zuul.项目地址:我的gi ...
- 理解Web路由(浅谈前后端路由与前后端渲染)
1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...
- vue动态添加路由addRoutes之不能将动态路由存入缓存
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
- Laravel之路由 Route::get/post/any、路由参数、过滤器、命名、子域名、前缀、与模型绑定、抛出 404 错误、控制器
基本路由 应用中的大多数路都会定义在 app/routes.php 文件中.最简单的Laravel路由由URI和闭包回调函数组成. 基本 GET 路由 代码如下: Route::get('/', fu ...
随机推荐
- 读取xml时,报错:xml.etree.ElementTree.ParseError: no element found: line 20, column 9
读取xml时,出现报错:xml.etree.ElementTree.ParseError: no element found: line 20, column 9 原因是xml文件格式有问题,可以检查 ...
- C#一些不太熟悉的类——扩展学习
Process.CloseMainWindow Method 通过向进程的主窗口发送关闭消息来关闭拥有用户界面的进程. 注解 进程执行时,其消息循环处于等待状态. 每次操作系统将 Windows 消息 ...
- 基于GitLab CI搭建Golang自动构建环境
基于GitLab CI搭建Golang自动构建环境 Golang发布遇到的问题 对于golang的发布,之前一直没有一套规范的发布流程,来看看之前发布流程: 方案一 开发者本地环境需要将环境变量文件改 ...
- android:duplicateParentState属性使用场景
对于这个属性的使用也是在偶然的时候发现的,之前从未使用它,所以有必要阐述一下它的用法,什么场景会要用它这个属性,在我不知道之前这个属性之前,也同样能实现效果,但是当我知道它的存在之后,我肯定在某种场景 ...
- P1281 书的复制[二分]
题目描述 现在要把m本有顺序的书分给k给人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如不能把第一.第三.第四本书给同一个人抄写. ...
- 小知识——c++关于指针的理解
参考文章: 简介: 指针可以简化c++编程,在一些任务中没有指针是无法完成的(动态内存分配) 使用 & 可以获得变量在内存中的地址: eg: #include <iostream> ...
- ajax跨域请求webservice webconfig配置
<configuration> <system.web> <compilation debug="true" targetFramework=&quo ...
- 到spring官网创建第一个springboot工程
登录到spring的官网,直接生成一个,然后倒入本地工程就可以了. https://start.spring.io/ 点击创建的时候. 就等于下载了这个工程. 下载后,倒入到我们的maven工程可以直 ...
- ajax当有返回值时
当ajax方法里面有return 值时,无法使用两种精简版的只能使用经典版 因为ajax 方法时异步的,正确的方式时使用经典版中async:false 设置为同步 默认为true 是异步 正确代码如 ...
- mutt/mail
邮件管理命令 发送和接收邮件