当前位置: 首页 > 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;避免使用两次相同的元素…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...