一、Flutter 页面跳转

Flutter 页面跳转 :

路由 ( Route ) : 每个页面都可以设置一个路由名称 , 在路由中注册该名称 , 之后便可以通过路由名称进行页面跳转 ;

// 通过路由名称实现页面跳转 , 通过路由名称字符串实现跳转
Navigator.pushNamed(context, "LayoutPage");

导航 ( Navigator ) : 通过 Navigator 直接跳转 ;

// 通过 Navigator 实现页面跳转 , 直接通过页面组件对象跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

二、路由信息注册

注册路由 : 在 MaterialApp 根节点组件中的 routes 字段注册路由 , 路由信息存储在 Map<String, WidgetBuilder> 集合中 , 键是路由名称 , 值是页面 Widget 组件 ;

代码示例 :

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(// 设置标题title: 'Flutter Demo',// 设置主题theme: ThemeData(primarySwatch: Colors.blue,),// 设置界面主组件home: Scaffold(// 设置标题栏appBar: AppBar(title: Text("路由与导航"),),// 设置界面主体组件body: RouteNavigator(),),// 配置路由routes: <String, WidgetBuilder>{"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),"LayoutPage" : (BuildContext context) => LayoutPage()},);}
}

代码解析 : 上述代码的作用是注册如下路由信息 ,

StatelessWidgetPage 页面组件对应的路由名称是 " StatelessWidgetPage " 字符串 ,

StatefulWidgetPage 页面组件对应的路由名称是 " StatefulWidgetPage " 字符串 ,

LayoutPage 页面组件对应的路由名称是 " LayoutPage " 字符串 ,

三、通过路由名实现页面跳转

通过路由名实现页面跳转 : 调用 Navigator 的 pushNamed 方法 , 实现页面跳转 , 第一个参数是 BuildContext context , 第二个参数是路由名字符串 ; 代码格式如下 :

Navigator.pushNamed(上下文对象, "路由名称");

代码示例 : 下面代码的作用是跳转到 “LayoutPage” 路由名称对应的页面 ;

RaisedButton(onPressed: (){Navigator.pushNamed(context, "LayoutPage");},child: Text("通过路由名跳转到页面1"),
),

四、通过路由名实现页面跳转

调用 Navigator.push 方法实现页面跳转 , 此处第二个参数传入 MaterialPageRoute<T> 类型对象 , 代码如下 :

Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

代码示例 : 跳转到 LayoutPage 界面 ;

RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));},child: Text("通过导航跳转到页面1"),
),

五、退出界面

在 AppBar 组件中设置回退按钮点击事件 , 调用 Navigator.pop(context) 方法 , 即可退出当前界面 ;

// 退出当前界面
Navigator.pop(context);

代码示例 :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState();
}class _LayoutPageState extends State<LayoutPage> {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: '布局组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('布局组件示例'),// 回退按钮, 点击该按钮退出该界面leading: GestureDetector(onTap: (){// 退出界面方法Navigator.pop(context);},child: Icon(Icons.arrow_back_ios),),),body: 主组件省略,));}}

六、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';
import 'package:flutter_cmd/StatelessWidgetPage.dart';
import 'LayoutPage.dart';
import 'StatefulWidgetPage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(// 设置标题title: 'Flutter Demo',// 设置主题theme: ThemeData(primarySwatch: Colors.blue,),// 设置界面主组件home: Scaffold(// 设置标题栏appBar: AppBar(title: Text("路由与导航"),),// 设置界面主体组件body: RouteNavigator(),),// 配置路由routes: <String, WidgetBuilder>{"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),"LayoutPage" : (BuildContext context) => LayoutPage()},);}
}class RouteNavigator extends StatefulWidget {@override_RouteNavigatorState createState() => _RouteNavigatorState();
}class _RouteNavigatorState extends State<RouteNavigator> {@overrideWidget build(BuildContext context) {return Container(child: Column(children: <Widget>[RaisedButton(onPressed: (){Navigator.pushNamed(context, "LayoutPage");},child: Text("通过路由名跳转到页面1"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatefulWidgetPage");},child: Text("通过路由名跳转到页面2"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatelessWidgetPage");},child: Text("通过路由名跳转到页面3"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));},child: Text("通过导航跳转到页面1"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));},child: Text("通过导航跳转到页面2"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));},child: Text("通过导航跳转到页面3"),),],),);}
}

设置回退按钮示例 :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState();
}class _LayoutPageState extends State<LayoutPage> {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: '布局组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('布局组件示例'),// 回退按钮, 点击该按钮退出该界面leading: GestureDetector(onTap: (){// 退出界面方法Navigator.pop(context);},child: Icon(Icons.arrow_back_ios),),),body: 主组件省略,));}}

运行效果展示 :

七、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 页面跳转 ( 路由 Route | 导航器 Navigator | 页面关闭 )相关推荐

VUE3页面跳转路由跳转带参路由跳转
VUE3页面跳转路由跳转带参路由跳转第一种第二种第一种跳转: import {useRouter} from "vue-router"; const router = us ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
实现网页原路返回：从哪个页面跳转过来就返回哪个页面
一.需求导航对于PC网站或WAP网站有着相当重要的作用,它有利于提升用户体验,不至于让用户迷路.而"返回"就是导航的功能之一,主要体现在WAP网页左上角的"返回&quo ...
js 页面跳转方法当前页与新增页面
js 页面跳转方法 open('http://www.baidu.com'); //页面跳转打开一个新的页面close() //关闭当前页面location.href //可以进行页面跳转当前网页直接 ...
从一个jsp页面跳转到另一个jsp页面时的参数传递
1.从一个jsp页面跳转到另一个jsp页面时的参数传递 (1)使用request对象获取客户端提交的信息 login.jsp页面代码如下: [java] view plaincopy <%@ ...
html在父窗口中打开新页面跳转,路由跳转、打开新窗口、跳转到新页面
基础不扎实,温故知新下方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describ ...
location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢, 下面说一下window.location.hash,概念性的东西大家 ...
javascript传值和页面跳转传值（ASP.NET页面传参的三种方法）
我在csdn上提的问题是我现在希望从asp.net网页弹出对话框,弹出一些错误信息.警告.提示信息之类的东西,目前准备用javascript实现,所以我希望在调这个对话框的时候,动态传 ...
mysql 页面跳转_Springboot+MyBatis+mysql+jsp页面跳转详细示例
SpringBoot与MyBatis搭建环境,底层数据库为mysql,页面使用JSP(官网上不推荐使用jsp),完成从数据库中查询出数据,在jsp页面中显示,并且实现页面的跳转功能. 项目下载链接: ...

【Flutter】Flutter 页面跳转 ( 路由 Route | 导航器 Navigator | 页面关闭 )

文章目录