Futter基础第10篇：实现替换路由、返回到根路由

效果图：

Setting.dart
RegisterFirst.dart

RegisterSecond.dart

RegisterThird.dart

无相关的页面代码架构请参考：flutter实现页面跳转、跳转传值（命名路由、命名路由传值）

主要变动：

这里负责贴主要代码：

Login.dart

import 'package:flutter/material.dart';class LoginPage extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('登录'),),body: Center(child: Column(children: <Widget>[SizedBox(height: 40,),Text('这是一个登录页面，点击登录会执行登录操作'),RaisedButton(child: Text('登录'),onPressed: (){},)],),),);}
}

RegisterFirst.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class RegisterFirstPage extends StatelessWidget {const RegisterFirstPage({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("第一步-输入手机号")),body:Column(children: <Widget>[SizedBox(height: 40),Text("这是注册的第一步,请输入您的手机号 然后点击下一步"),SizedBox(height: 40),RaisedButton(child: Text('下一步'),onPressed: (){//                 Navigator.pushNamed(context, '/registerSecond');//替换路由// 表示点击按钮时跳转到第二个页面，并且是一种替换，简单来说可以理解为被销毁的意思Navigator.of(context).pushReplacementNamed('/registerSecond');},)],));}
}

RegisterSecond.dart

import 'package:flutter/material.dart';class RegisterSecondPage extends StatelessWidget {const RegisterSecondPage({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("第二步-验证码")),body:Column(children: <Widget>[SizedBox(height: 40),Text("输入验证码完成注册"),SizedBox(height: 40),RaisedButton(child: Text('下一步'),onPressed: (){Navigator.pushNamed(context, '/registerThird');//替换路由
//            Navigator.of(context).pushReplacementNamed('/registerThird');},)],));}
}

RegisterThird.dart

import 'package:flutter/material.dart';
import 'package:flutter_app15/pages/Tabs.dart';class RegisterThirdPage extends StatelessWidget {const RegisterThirdPage({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("第三步-完成注册")),body:Column(children: <Widget>[SizedBox(height: 40),Text("输入密码完成注册"),SizedBox(height: 40),RaisedButton(child: Text('确定'),onPressed: (){/***  返回根           pushAndRemoveUntil*  实现原理：*  1、首先先将所有的路由全部置为空                 (route) => route == null*  2、然后再跳转回根路由                new MaterialPageRoute(builder: (context) => new Tabs()),*/Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context) => new Tabs(index:1)),(route) => route == null);},)],));}
}

Setting.dart

import 'package:flutter/material.dart';class SettingPage extends StatefulWidget {@override_SettingPageState createState() => _SettingPageState();
}class _SettingPageState extends State<SettingPage> {@overrideWidget build(BuildContext context) {return Column(children: <Widget>[Column(children: <Widget>[ListTile(title: Text('我是一个文本'),),ListTile(title: Text('我是一个文本'),),ListTile(title: Text('我是一个文本'),),ListTile(title: Text('我是一个文本'),),ListTile(title: Text('我是一个文本'),)],),RaisedButton(child: Text('跳转到登录页面'),onPressed: (){Navigator.pushNamed(context, '/login');},),RaisedButton(child: Text('跳转到注册页面'),onPressed: (){Navigator.pushNamed(context, '/registerFirst');},)],);}
}

Routes.dart

import 'package:flutter_app15/pages/user/RegisterThird.dart';import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Tabs.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';import '../pages/user/Login.dart';
import '../pages/user/RegisterFirst.dart';
import '../pages/user/RegisterSecond.dart';
import '../pages/user/RegisterThird.dart';import 'package:flutter/material.dart';//配置路由
final  routes={                   //配置命名路由'/':(context)=>Tabs(),  //命名路由传值 arguments工具是必须的'/form':(context)=>FormPage(),'/product':(context)=>ProductPage(),  //命名路由传值 arguments工具是必须的'/productInfoPage':(context,{arguments})=>ProductInfoPage(arguments:arguments),  //命名路由传值 arguments工具是必须的'/search':(context,{arguments})=>SearchPage(arguments:arguments),  //命名路由传值 arguments工具是必须的'/login':(context)=>LoginPage(),'/registerFirst':(context)=>RegisterFirstPage(),'/registerSecond':(context)=>RegisterSecondPage(),'/registerThird':(context)=>RegisterThirdPage()
};//固定写法
var oonGenerateRoute=(RouteSettings settings) {// 统一处理final String name = settings.name;    //得到命名路由的名字，例如：'/form'final Function pageContentBuilder = routes[name];  //得到命名路由的键去获取值，例如：(context)=>FormPage(),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;}}
};

Futter基础第10篇：实现替换路由、返回到根路由相关推荐

Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
wpf 开源框架_.NET Core跨平台基础框架：10 篇热文汇总
(给DotNet加星标,提升.Net技能) 本文精选了DotNet 2019年12月份的10篇热门文章.其中有技术分享.技术资源. 注:以下文章,点击标题即可阅读 <C#异步编程 > Ta ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
[密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第10篇]RSA和强RSA问题有什么区别
这个密码学52件事数学知识的第一篇,也是整个系列的第10篇.这篇介绍了RSA问题和Strong-RSA问题,指出了这两种问题的不同之处. 密码学严重依赖于这样的假设,某些数学问题难以在有限的时间内解决 ...
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
vue教程提示:Vue3系列请参考Vue2+Vue3小白零基础教程-vue3篇文章,本文为vue2篇. 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么一套用于构建用户界面的渐进式J ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
暑假计算机培训心得体会,暑期培训心得体会模板集锦10篇
暑期培训心得体会模板集锦10篇我们得到了一些心得体会以后,可用写心得体会的方式将其记录下来,这样有利于我们不断提升自我.那么写心得体会要注意的内容有什么呢?下面是小编整理的暑期培训心得体会10篇,欢 ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
vue2进阶篇：vue-router之“使用独享路由守卫”
文章目录 10.13路由守卫案例:将案例改为"使用独享路由守卫" 完整代码本人其他相关文章链接 10.13路由守卫注意点1: 前置路由守卫或者后置路由守卫中,to指代切换到哪 ...
web前端类毕业论文文献（推荐10篇）
本文是为大家整理的web前端主题相关的10篇毕业论文文献,包括5篇期刊论文和5篇学位论文,为web前端概论选题相关人员撰写毕业论文提供参考. 1.[期刊论文]Web前端开发技术以及优化策略分析期刊: ...

Futter基础第10篇： 实现替换路由、返回到根路由

Futter基础第10篇： 实现替换路由、返回到根路由相关推荐

最新文章

热门文章

Futter基础第10篇：实现替换路由、返回到根路由

Futter基础第10篇：实现替换路由、返回到根路由相关推荐