当前位置: 首页 > news >正文

【Flutter】路由与导航:复杂导航与深度链接

在开发大型 Flutter 应用时,复杂的导航管理是不可避免的。除了基本的页面跳转与返回操作外,很多应用会用到 嵌套路由页面分组TabBarDrawer 的结合使用等复杂导航场景,甚至支持 深度链接动态路由。本文将深入探讨这些高级导航技巧,并带你逐步实现它们。

实现嵌套路由与页面分组

Flutter 提供了灵活的导航机制,通过嵌套的 Navigator 可以实现多个层级的路由管理。在实际场景中,比如主页面中有多个模块(TabBar、底部导航栏等),每个模块内部又有子页面时,嵌套路由变得非常有用。

Navigator 嵌套实现

我们可以在主页面中定义一个 Navigator,然后在每个模块的子页面中再定义一个 Navigator 来处理各自模块的内部页面导航。

示例

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: MainPage(),);}
}class MainPage extends StatefulWidget {_MainPageState createState() => _MainPageState();
}class _MainPageState extends State<MainPage> {int _selectedIndex = 0;final List<Widget> _pages = [NestedNavigatorPage1(),NestedNavigatorPage2(),];Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Nested Navigator Example'),),body: _pages[_selectedIndex],bottomNavigationBar: BottomNavigationBar(currentIndex: _selectedIndex,onTap: (index) {setState(() {_selectedIndex = index;});},items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Page 1'),BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Page 2'),],),);}
}// Page 1 with nested Navigator
class NestedNavigatorPage1 extends StatelessWidget {Widget build(BuildContext context) {return Navigator(onGenerateRoute: (settings) {return MaterialPageRoute(builder: (context) => Page1Main());},);}
}class Page1Main extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(child: Text('Go to Page 1.1'),onPressed: () {Navigator.push(context,MaterialPageRoute(builder: (context) => Page1Sub()),);},),),);}
}class Page1Sub extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Center(child: Text('Page 1.1'),),);}
}// Page 2 with nested Navigator
class NestedNavigatorPage2 extends StatelessWidget {Widget build(BuildContext context) {return Navigator(onGenerateRoute: (settings) {return MaterialPageRoute(builder: (context) => Page2Main());},);}
}class Page2Main extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(child: Text('Go to Page 2.1'),onPressed: () {Navigator.push(context,MaterialPageRoute(builder: (context) => Page2Sub()),);},),),);}
}class Page2Sub extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(body: Center(child: Text('Page 2.1'),),);}
}

代码解析

  1. 嵌套的 Navigator:在 NestedNavigatorPage1NestedNavigatorPage2 中使用了各自的 Navigator,使得不同模块之间的导航彼此独立。
  2. 底部导航栏:通过 BottomNavigationBar 来切换模块,避免每次切换模块时都重置页面栈。

学习 TabBar 和 Drawer 结合导航

在很多应用中,常常会结合 TabBarDrawer 来实现更复杂的导航布局。TabBar 用于页面的切换,而 Drawer 用于展示应用的全局导航菜单。

使用 TabBar 实现导航

TabBar 是用于在多个页面之间切换的组件,它通常与 TabController 一起使用。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: TabBarExample(),);}
}class TabBarExample extends StatelessWidget {Widget build(BuildContext context) {return DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Text('TabBar Example'),bottom: TabBar(tabs: [Tab(icon: Icon(Icons.home), text: 'Home'),Tab(icon: Icon(Icons.search), text: 'Search'),Tab(icon: Icon(Icons.settings), text: 'Settings'),],),),body: TabBarView(children: [Center(child: Text('Home Page')),Center(child: Text('Search Page')),Center(child: Text('Settings Page')),],),),);}
}

代码解析

  1. DefaultTabController:提供了 TabController 的默认实现,用于管理选中的 Tab。
  2. TabBar:定义了导航的 Tab 页。
  3. TabBarView:用于展示对应的页面内容。

使用 Drawer 实现导航

Drawer 是一个侧边导航栏,通常用于提供全局的页面导航。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: DrawerExample(),);}
}class DrawerExample extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Drawer Example'),),drawer: Drawer(child: ListView(padding: EdgeInsets.zero,children: <Widget>[DrawerHeader(child: Text('Menu'),decoration: BoxDecoration(color: Colors.blue,),),ListTile(title: Text('Page 1'),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (context) => Page1()));},),ListTile(title: Text('Page 2'),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (context) => Page2()));},),],),),body: Center(child: Text('Main Page')),);}
}class Page1 extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Page 1'),),body: Center(child: Text('This is Page 1')),);}
}class Page2 extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Page 2'),),body: Center(child: Text('This is Page 2')),);}
}

代码解析:

  1. Drawer:定义了一个侧边导航栏,提供了页面的跳转入口。
  2. ListTile:在 Drawer 中使用 ListTile 作为每个导航选项。

实现深度链接和动态路由

深度链接是指用户通过一个外部 URL 直接进入应用中的某个页面,而不是从主页面进入。Flutter 支持将深度链接映射到应用的特定页面,并且还可以通过动态路由实现复杂的路由匹配。

动态路由

通过动态路由,应用可以根据传入的 URL 动态地匹配和展示页面。onGenerateRoute 是处理动态路由的核心方法。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(initialRoute: '/',onGenerateRoute: (RouteSettings settings) {if (settings.name == '/') {return MaterialPageRoute(builder: (context) => HomePage());} else if (settings.name == '/details') {final args = settings.arguments as String;return MaterialPageRoute(builder: (context) => DetailsPage(data: args));}return null;},);}
}class HomePage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home Page'),),body: Center(child: ElevatedButton(child: Text('Go to Details'),onPressed: () {Navigator.pushNamed(context, '/details', arguments: 'Some data');},),),);}
}class DetailsPage extends StatelessWidget {final String data;DetailsPage({required this.data});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Details Page'),),body: Center(child: Text('Passed data: $data'),),);}
}

代码解析

  1. onGenerateRoute:根据传入的 URL 动态生成页面,支持传递参数。
  2. 深度链接:可以通过外部的 URL 链接直接跳转到应用中的某个页面。

总结

在本教程中,我们探讨了 Flutter 中更复杂的导航方式。通过 嵌套路由页面分组,可以轻松管理多模块页面的导航逻辑;通过 TabBarDrawer,实现了常见的导航布局;通过 动态路由深度链接,支持外部 URL 链接直接跳转到特定页面。

  • 嵌套路由:实现不同页面模块间的独立导航。
  • TabBar 与 Drawer:结合导航,提供丰富的界面切换方式。
  • 深度链接和动态路由:实现 URL 与页面的映射,增强用户体验。

掌握这些技巧后,你将能够开发出复杂的多页面应用,同时提供流畅的导航体验。

相关文章:

【Flutter】路由与导航:复杂导航与深度链接

在开发大型 Flutter 应用时&#xff0c;复杂的导航管理是不可避免的。除了基本的页面跳转与返回操作外&#xff0c;很多应用会用到 嵌套路由、页面分组、TabBar 和 Drawer 的结合使用等复杂导航场景&#xff0c;甚至支持 深度链接 和 动态路由。本文将深入探讨这些高级导航技巧…...

07 实战:视频捕获

代码如下: import tkinter as tk # 导入tkinter库,用于创建图形用户界面 from tkinter import ttk, filedialog, messagebox # 导入tkinter的额外部件、文件对话框和消息框 import cv2 # 导入OpenCV库,用于图像处理 import numpy as np # 导入NumPy库,用于数值计算 from P…...

前端页面使用google地图api实现导航功能,开发国外网站免费简单好用

开发国外软件的时候&#xff0c;想使用goole map实现导航等功能&#xff0c;可以使用google的api来做&#xff0c;官方文档地址&#xff1a;https://developers.google.com/maps/documentation/urls/get-started?hlzh-cn &#xff0c;比如&#xff1a; 支持的请求的操作&…...

UE4 材质学习笔记12(水体反射和折射)

一.水体反射和折射 首先就是要断开所有连接到根节点的线&#xff0c;因为水有很多不同的节点成分&#xff0c;当所有其他节点都在用时 要分辨出其中一个是何效果是很难的。 虚幻有五种不同的方法可以创建反射&#xff0c;虚幻中的大多数场景使用多种这些方法 它们会同时运作。…...

Go:error处理机制和函数

文章目录 error处理机制函数函数作为参数匿名函数匿名函数和闭包闭包运用闭包与工厂模式 error处理机制 本篇总结的是Go中对于错误的处理机制 Go 语言的函数经常使用两个返回值来表示执行是否成功&#xff1a;返回某个值以及 true 表示成功&#xff1b;返回零值&#xff08;或…...

智能指针(3)

目录 可能问题五&#xff1a; 问题分析&#xff1a; 答案格式&#xff1a; shared_ptr的模拟实现 部分1&#xff1a;引用计数的设计(分考点1) 代码实现&#xff1a; 部分2&#xff1a;作为类所必须的部分(分考点2) 代码实现&#xff1a; 部分3&#xff1a;拷贝构造函数…...

spring源码拓展点3之addBeanPostProcesser

概述 在refresh方法中的prepareBeanFactory方法中&#xff0c;有一个拓展点&#xff1a;addBeanPostProcessor。即通过注入Aware对象从而将容器中的某些值设置到某个bean中。 beanFactory.addBeanPostProcessor(new ApplicationContextAwareProcessor(this));aware接口调用 …...

【计网】理解TCP全连接队列与tcpdump抓包

希望是火&#xff0c;失望是烟&#xff0c; 生活就是一边点火&#xff0c;一边冒烟。 理解TCP全连接队列与tcpdump抓包 1 TCP 全连接队列1.1 重谈listen函数1.2 初步理解全连接队列1.3 深入理解全连接队列 2 tcpdump抓包 1 TCP 全连接队列 1.1 重谈listen函数 这里我们使用…...

react18中实现简易增删改查useReducer搭配useContext的高级用法

useReducer和useContext前面有单独介绍过&#xff0c;上手不难&#xff0c;现在我们把这两个api结合起来使用&#xff0c;该怎么用&#xff1f;还是结合之前的简易增删改查的demo&#xff0c;熟悉vue的应该可以看出&#xff0c;useReducer类似于vuex&#xff0c;useContext类似…...

排序算法 —— 冒泡排序

目录 1.冒泡排序的思想 2.冒泡排序的实现 3.冒泡排序的总结 1.冒泡排序的思想 冒泡排序的思想就是在待排序序列中依次比较相邻两个元素&#xff0c;将大的or小的元素往后挪&#xff0c;每一趟都能保证将至少一个元素挪动到正确的位置&#xff0c;然后在待排序序列中重复该过…...

QT--文本框 QLineEdit、qtextedit

在Qt中&#xff0c;文本框&#xff08;QLineEdit 或 QTextEdit&#xff09;和标签&#xff08;QLabel&#xff09;是两种不同的部件&#xff08;widget&#xff09;&#xff0c;它们的主要区别在于用途和功能&#xff1a; QLabel&#xff08;标签&#xff09; 用途&#xff1…...

Qt编写的modbus模拟器/支持网络和串口以及websocket/支持网络rtu

一、使用说明 1.1 设备模拟-Com 第一步&#xff0c;填写要模拟的设备地址&#xff0c;0表示自动处理&#xff0c;也就是收到什么地址就应答什么地址。第二步&#xff0c;填写对应的串口号和波特率。第三步&#xff0c;单击打开串口&#xff0c;成功后会变成关闭串口字样。单击…...

Standard_Matrix

文章目录 假设我们有一个样本矩阵X&#xff0c;每一列表示一个样本&#xff0c;现在我们要把样本转换成均值为0&#xff0c;方差为1的样本矩阵 X s t a n d a r d X − μ s \begin{equation} X_{standard}\frac{X-\mu}{s} \end{equation} Xstandard​sX−μ​​​python 测试…...

js 通过input,怎么把选择的txt文件转为base64格式

文章目录 基本概念与作用说明Base64编码File对象相互转换的意义 从File对象到Base64编码从Base64编码到File对象批量转换File对象为Base64编码批量转换Base64编码为File对象功能使用思路思路一&#xff1a;动态生成预览思路二&#xff1a;异步处理与用户反馈思路三&#xff1a;…...

华为HCIP-openEuler认证详解

华为HCIP认证&#xff08;Huawei Certified ICT Professional&#xff09;是华为提供的专业级ICT技术认证&#xff0c;它旨在验证技术人员在特定技术领域的专业知识和实践能力。对于华为欧拉&#xff08;openEuler&#xff09;方向的HCIP认证&#xff0c;即HCIP-openEuler&…...

YOLO11改进 | 注意力机制 | 添加双重注意力机制 DoubleAttention【附代码+小白必备】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 在本文中&#xff0c;给大家带来的教程是…...

sentinel原理源码分析系列(四)-ContextEntry

启动和初始化完成后&#xff0c;调用者调用受保护资源&#xff0c;触发sentinel的机制&#xff0c;首先构建或获取Context和获取Entry&#xff0c;然后进入插槽链&#xff0c;决定调用是否通过&#xff0c;怎样通过 上图展示构建Context和获取Entry的类互动图 获取或构建Conte…...

Tcp协议讲解与守护进程

TCP协议&#xff1a;面向链接&#xff0c;面向字节流&#xff0c;可靠通信 创建tcp_server 1.创建套接字 域&#xff1a;依旧选择AF_INET 连接方式&#xff1a; 选择SOCK_STREAM 可靠的 2.bind 3.监听装置 client要通信&#xff0c;要先建立连接&#xff0…...

学习threejs,THREE.LineDashedMaterial 虚线材质,基于gosper高斯帕曲线生成雪花动画

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.LineDashedMaterial虚…...

LeetCode 热题100之哈希

1.两数之和 思路分析1&#xff08;暴力法&#xff09; 双重循环枚举满足num[i] nums[j] target的索引&#xff0c;刚开始不知道如何返回一对索引。后来知道可以直接通过return {i,j}返回索引&#xff1b;注意&#xff1a;j应该从i1处开始&#xff0c;避免使用两次相同的元素…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...