当前位置： 首页 > article >正文

【Flutter】路由与导航：基础路由与导航

article 2024/10/25 23:49:57

在构建 Flutter 应用时，页面间的导航是不可避免的。当应用规模逐渐扩大时，我们常常需要在不同页面之间进行跳转，并且需要管理页面栈，处理页面之间的数据传递。Flutter 提供了一套强大且灵活的导航和路由管理机制，主要通过 Navigator 来管理页面的跳转与返回。本文将详细介绍如何使用 Navigator 实现基础的路由与导航，包括如何在不同页面之间跳转、返回以及如何传递参数。

Navigator 简介

Navigator 是 Flutter 提供的用于管理页面导航的核心组件。它的内部维护了一个 页面栈（stack），每当你导航到新页面时，新页面会被压入栈顶，返回时会从栈顶弹出页面。我们可以通过 push() 方法将页面添加到栈中，通过 pop() 方法从栈中移除页面。

常用方法

  • Navigator.push()：将一个新的页面压入栈顶，展示该页面。
  • Navigator.pop()：从栈顶移除页面，返回到上一页面。

示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(), // 应用的初始页面
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 使用 Navigator.push 跳转到第二个页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            // 使用 Navigator.pop 返回到第一个页面
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

代码解析

  1. Navigator.push：在 FirstPage 中，我们使用 Navigator.push 将 SecondPage 压入栈中并进行页面跳转。
  2. Navigator.pop：在 SecondPage 中，我们使用 Navigator.pop 返回到 FirstPage，即从页面栈顶移除当前页面。

页面栈的管理

Flutter 的导航系统基于栈的概念，因此每次导航都会将页面压入栈顶，而 Navigator.pop() 则会将当前页面从栈顶移除并返回到上一页面。理解这一点对于有效管理页面的跳转和返回非常重要。

示例：从第三个页面返回到第一个页面

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Third Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ThirdPage()),
            );
          },
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            // 连续调用 Navigator.pop() 返回到第一个页面
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
    );
  }
}

代码解析

  • Navigator.popUntil()：可以在页面栈中向后弹出页面，直到指定的路由为止。在这里，ModalRoute.withName('/') 返回到应用的根页面（FirstPage）。

命名路由

虽然通过 MaterialPageRoute 构建路由跳转非常灵活，但在大型应用中，页面多了以后可能会让路由管理变得繁琐。为此，Flutter 提供了 命名路由 来简化页面导航。

设置命名路由

在 MaterialApp 中，可以通过 routes 参数定义应用的命名路由。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 定义命名路由
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
      initialRoute: '/', // 初始路由
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 使用命名路由跳转到第二个页面
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Third Page'),
          onPressed: () {
            Navigator.pushNamed(context, '/third');
          },
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
    );
  }
}

代码解析

  1. routes 参数：定义了页面与路由名称的映射。在本例中，/ 对应 FirstPage，/second 对应 SecondPage，/third 对应 ThirdPage。
  2. Navigator.pushNamed()：使用命名路由进行页面跳转，简化了手动构建 MaterialPageRoute 的步骤。

传递参数

在实际项目中，页面之间的跳转往往需要传递参数，比如从列表页面跳转到详情页面时，我们需要传递某个列表项的数据。在 Flutter 中，既可以在使用 Navigator.push 的时候传递参数，也可以在使用命名路由时传递参数。

使用 Navigator.push 传递参数

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 跳转到第二个页面并传递参数
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(message: 'Hello from First Page!'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final String message;
  SecondPage({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child:

 Text(message), // 显示传递的参数
      ),
    );
  }
}

代码解析

  • message 参数传递：在 FirstPage 中，我们将 message 参数通过 MaterialPageRoute 传递给 SecondPage。在 SecondPage 中，通过构造函数接收参数，并在 UI 中展示。

使用命名路由传递参数

使用命名路由时，可以通过 Navigator.pushNamed 的 arguments 参数来传递数据。

Navigator.pushNamed(
  context,
  '/second',
  arguments: 'Hello from First Page!',
);

在目标页面中，通过 ModalRoute.of(context) 来接收参数：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(args), // 显示传递的参数
      ),
    );
  }
}

总结

通过本教程，你已掌握了 Flutter 中的基础路由与导航的使用。以下是本教程的重点：

  • 页面跳转与返回：使用 Navigator.push() 和 Navigator.pop() 实现基本的页面跳转与返回。
  • 命名路由：通过 routes 参数定义路由表，并使用 Navigator.pushNamed() 进行页面跳转。
  • 页面栈管理：理解页面栈的概念，使用 Navigator.popUntil() 返回到指定页面。
  • 参数传递：学会在页面之间传递参数，既可以通过 Navigator.push()，也可以通过 Navigator.pushNamed()。

掌握这些基本的导航技巧后，你将能够轻松地在 Flutter 应用中实现页面间的跳转和状态传递。


http://www.kler.cn/news/365079.html

相关文章：

  • sqlyog连接MySQL8.4报1251错误
  • 【SQL 数据库索引优化之 覆盖索引】原理深究剖析，拒绝假大空（VIP专属）
  • 怎么区分主谓宾I love you与主系表I am fine？ 去掉宾语看句子完整性 主系表结构则侧重于描述主语的状态、特征或性质
  • 三款计算服务器配置→如何选择科学计算服务器？
  • 戴维南,叠加,稳态笔记
  • 装了Ubuntu和Windows双系统，如何设置默认启动Windows
  • HTML5教程（一）- 网页与开发工具
  • 基于RK3588/算能BM1684 AI盒子：综合视频智能AI分析系统建设方案（三）安全帽、睡岗检测、电瓶车、吸烟场景
  • 51单片机——OLED显示图片
  • Python进阶知识3
  • 数字 图像处理算法的形式
  • 第二单元历年真题整理
  • vivado 接口带宽验证
  • 第五十四章 安全元素的详细信息 - DerivedKeyToken 详情
  • essay
  • 滤波算法与SLAM：从概率角度理解SLAM问题
  • 如何快速生成大量有意义的测试数据？
  • 多线程学习篇五：wait / notify / notifyAll
  • JSON Web Token (JWT)的简单介绍、验证过程及令牌刷新思路
  • 植物健康，Spring Boot来助力
  • 如何训练 RAG 模型
  • axios取消请求逻辑
  • html+css+js实现Badge 标记
  • Mysql树形结构表-查询所有父级数据（模糊查询）
  • Android14 和android12 在锁屏界面Keyguard输错5次密码后倒计时30秒时重启手机不显示倒计时
  • SOLIDWORKS正版软件的渠道分别是哪些，如何选择？