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

韩曙亮

发布于 2023-03-28 21:41:46

2.4K0

发布于 2023-03-28 21:41:46

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-03-02，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter