【Flutter】Flutter 页面跳转 ( 路由 Route |
您所在的位置：网站首页 › 高中数学对数乐乐课堂 › 【Flutter】Flutter 页面跳转 ( 路由 Route |
|
文章目录一、Flutter 页面跳转二、路由信息注册三、通过路由名实现页面跳转四、通过路由名实现页面跳转五、退出界面六、完整代码示例七、相关资源一、Flutter 页面跳转 Flutter 页面跳转 : 路由 ( Route ) : 每个页面都可以设置一个路由名称 , 在路由中注册该名称 , 之后便可以通过路由名称进行页面跳转 ;// 通过路由名称实现页面跳转 , 通过路由名称字符串实现跳转 Navigator.pushNamed(context, "LayoutPage");导航 ( Navigator ) : 通过 Navigator 直接跳转 ;// 通过 Navigator 实现页面跳转 , 直接通过页面组件对象跳转 Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));二、路由信息注册注册路由 : 在 MaterialApp 根节点组件中的 routes 字段注册路由 , 路由信息存储在 Map 集合中 , 键是路由名称 , 值是页面 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: { "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 类型对象 , 代码如下 : 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 { // 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: { "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(), "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(), "LayoutPage" : (BuildContext context) => LayoutPage() }, ); } } class RouteNavigator extends StatefulWidget { @override _RouteNavigatorState createState() => _RouteNavigatorState(); } class _RouteNavigatorState extends State { @override Widget build(BuildContext context) { return Container( child: Column( children: [ 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 { // 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/flutterFlutter 中文社区 : https://flutter.cn/Flutter 实用教程 : https://flutter.cn/docs/cookbookFlutter 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 ) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |