flutter 路由管理- Navigator的push和pop

简介: Navigator类是flutter一个路由管理的组件,通过一个栈来管理活动路由集合,通常当前屏幕显示的页面就是栈顶的路由。

      在 Flutter 中,屏 (screen) 和 页面 (page) 都叫做 路由 (route),在下文中统称为“路由 (route)”。

      在 Android 开发中,Activity 相当于“路由”,在 iOS 开发中,ViewController 相当于“路由”,在 Flutter 中,“路由”也是一个 widget。怎样从一个“路由”跳转到新的“路由”就是我们接下来要讲的路由管理。

      Flutter 中的路由管理和原生开发类似,无论是 Android 还是 iOS,导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作返回到上一个页面,当前屏幕显示的页面就是栈顶的路由,而路由管理主要是指如何来管理该路由栈。

      Navigator类是flutter一个路由管理的组件,提供了一系列方法来管理路由栈。下边我们先结合flutter官方文档上例子介绍其最常用的两个方法,既Navigator.push() 和Navigator.pop() 。

  1. Future push(BuildContext context, Route route)

    通过使用 Navigator.push() 方法将给定的 Route 对象入栈,即跳转到新的路由页面。

  1. bool pop(BuildContext context, [ result ])

     pop() 方法会从堆栈上移除 Route 对象(出栈),它将关闭当前页面返回上一个页面,其result 为页面关闭时返回给上一个页面的数据。

     在Navigator类中第一个参数为context的静态方法都有对应一个Navigator的实例方法, 比如Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route),看一下Navigator.push() 和Navigator.pop() 态方法源码,其中也是使用Navigator.of(context).[方法]来实现的。

import'package:flutter/foundation.dart';
import'package:flutter/material.dart';
voidmain() {
runApp(constMaterialApp(
title: '路由管理',
home: FirstRoute(),
  ));
}
//创建界面一classFirstRouteextendsStatelessWidget {
constFirstRoute({super.key});
@overrideWidgetbuild(BuildContextcontext) {
returnScaffold(
appBar: AppBar(
title: constText("页面一"),
      ),
body: Center(
child: ElevatedButton(
child: constText("跳转"),
onPressed: () async {
// 使用Navigator.push跳转到界面二varresult=awaitNavigator.push(context,
MaterialPageRoute(builder: (context) =>constSecondRoute(text: "页面二",)),
              );
if (kDebugMode) {
print("路由返回值: $result");
               }
          },
        ),
      ),
    );
  }
}
classSecondRouteextendsStatelessWidget {
finalStringtext;
constSecondRoute({super.key,requiredthis.text});
@overrideWidgetbuild(BuildContextcontext) {
returnScaffold(
appBar: AppBar(
title:  Text(text),
      ),
body: Center(
child: ElevatedButton(
onPressed: () {
// 使用Navigator.pop跳转到界面一Navigator.pop(context,"我是返回值");
          },
child: constText('返回'),
        ),
      ),
    );
  }
}

      在这个例子中,我们通过调Navigator.push()跳转到页面二,然后在调Navigator.pop() 返回到页面一,实现了界面之间的跳转和返回。

      在使用Navigator.push() 和Navigator.pop() 我如何进行路由传值呢,其实非常简单,在Navigator.push() 我们可以通过实例化新页面的构造函数将需要的参数给下一个页面,在Navigator.pop()时我们通过pop的result参数将数据返回给上一个页面。

相关文章
|
10天前
|
存储 JavaScript 前端开发
盘点主流 Flutter 状态管理库2024
状态管理是每个应用不可缺少的,本文将会盘点下主流的状态管理包。
108 2
盘点主流 Flutter 状态管理库2024
|
10天前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
402 0
|
10天前
|
存储 UED 开发者
Flutter的状态管理:setState、Provider、Bloc的使用详解
【4月更文挑战第26天】Flutter状态管理详解:涵盖setState基础,Provider的跨组件共享及Bloc的复杂场景处理。了解这三种方法的优缺点,助力优化应用数据一致性与用户体验。当状态管理需求升级,从简单的setState到Provider的便利,再到Bloc的强大功能,开发者可根据项目规模和复杂度选择合适策略。
|
10天前
|
Dart
Flutter状态管理:RxDart,详细介绍
Flutter状态管理:RxDart,详细介绍 RxDart是一个基于Dart语言的响应式编程库,它提供了一套用于处理异步事件序列的工具。在Flutter应用中,RxDart可以很好地用于管理应用状态。
130 0
|
10天前
|
BI
Flutter笔记:路由观察者
Flutter笔记:路由观察者
98 0
|
10天前
|
Linux 开发者 iOS开发
Flutter笔记:桌面端应用多窗口管理方案
Flutter笔记:桌面端应用多窗口管理方案
157 0
|
10天前
|
编解码 缓存 调度
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
99 0
|
10天前
|
UED
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等。默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要自定义一些特殊的动画效果来提高用户体验。本文将介绍如何在Flutter中实现自定义的路由切换动画。
|
10天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
8天前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)