【Flutter】Flutter 页面跳转 ( 路由 Route | 导航器 Navigator | 页面关闭 )
【摘要】
文章目录
一、Flutter 页面跳转二、路由信息注册三、通过路由名实现页面跳转四、通过路由名实现页面跳转五、退出界面六、完整代码示例七、相关资源
一、Flutter 页面跳...
一、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 {
@override
Widget 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.
@override
Widget 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 {
@override
Widget 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> {
@override
Widget 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.
@override
Widget 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
文章来源: hanshuliang.blog.csdn.net，作者：韩曙亮，版权归原作者所有，如需转载，请联系作者。
原文链接：hanshuliang.blog.csdn.net/article/details/114278320
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）