- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

韩曙亮发表于 2022/01/10 22:57:31 2022/01/10

【摘要】文章目录一、Flutter 页面跳转二、路由信息注册三、通过路由名实现页面跳转四、通过路由名实现页面跳转五、退出界面六、完整代码示例七、相关资源一、Flutter 页面跳...

文章目录

一、Flutter 页面跳转
二、路由信息注册
三、通过路由名实现页面跳转
四、通过路由名实现页面跳转
五、退出界面
六、完整代码示例
七、相关资源

一、Flutter 页面跳转

Flutter 页面跳转 :

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

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

  
 
  1
  2

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

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

  
 
  1
  2

二、路由信息注册

注册路由 : 在 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()
      },
    );
  }
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32

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

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

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

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

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

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

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

  
 
  1

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

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

  
 
  1
  2
  3
  4
  5
  6

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

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

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

  
 
  1

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

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

  
 
  1
  2
  3
  4
  5
  6

五、退出界面

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

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

  
 
  1
  2

代码示例 :

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: 主组件省略,
	  )
    );
  }

}


  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37

六、完整代码示例

完整代码示例 :

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"),
          ),

        ],
      ),
    );
  }
}


  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102

设置回退按钮示例 :

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: 主组件省略,
	  )
    );
  }

}


  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37

运行效果展示 :

七、相关资源

参考资料 :

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

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入