13.ArkUI Navigation的介绍和使用
ArkUI Navigation 组件介绍与使用指南
什么是 Navigation 组件?
Navigation 是 ArkUI 中的导航组件,用于管理页面间的导航和路由。它提供了页面栈管理、导航栏定制、页面切换动画等功能,是构建多页面应用的核心组件。
Navigation 的核心概念
- 页面栈:采用栈结构管理页面,遵循"后进先出"原则
- 导航模式:
NavigationMode.Stack
:栈模式(默认)NavigationMode.Split
:分栏模式(平板等大屏设备)
- 导航栏:可自定义标题栏区域
- 路由:通过路径标识页面,支持参数传递
基本使用方法
简单页面导航
// 首页
@Entry
@Component
struct HomePage {build() {Navigation() {Column() {Text('首页').fontSize(30).margin(20)Button('跳转到详情页').onClick(() => {router.pushUrl({url: 'pages/DetailPage'})})}.width('100%').height('100%')}.title('首页')}
}// 详情页
@Component
struct DetailPage {build() {Column() {Text('详情页内容').fontSize(30).margin(20)Button('返回').onClick(() => {router.back()})}.width('100%').height('100%')}
}
带参数的页面导航
// 列表页
@Entry
@Component
struct ListPage {private items: string[] = ['苹果', '香蕉', '橙子', '葡萄']build() {Navigation() {Column() {ForEach(this.items, (item) => {Button(item).width('80%').margin(5).onClick(() => {router.pushUrl({url: 'pages/DetailPage',params: { name: item }})})})}}.title('水果列表')}
}// 详情页
@Component
struct DetailPage {@State name: string = ''onPageShow() {this.name = router.getParams()?.['name'] || '未知'}build() {Column() {Text(`您选择了: ${this.name}`).fontSize(30).margin(20)}}
}
高级用法
自定义导航栏
@Entry
@Component
struct CustomNavPage {build() {Navigation() {Column() {Text('页面内容').fontSize(20).margin(20)}}.title('自定义标题').subTitle('副标题').hideBackButton(false).toolBar({items: [{icon: $r('app.media.ic_share'),action: () => {// 分享操作}},{icon: $r('app.media.ic_favorite'),action: () => {// 收藏操作}}]}).navBarWidth('80%').navBarPosition(NavBarPosition.Start)}
}
分栏模式 (Split)
@Entry
@Component
struct SplitNavigationExample {private menus: string[] = ['首页', '分类', '发现', '我的']@State selectedIndex: number = 0build() {Navigation() {Column() {ForEach(this.menus, (menu, index) => {Button(menu).width('100%').stateEffect(this.selectedIndex === index).onClick(() => {this.selectedIndex = index})})}.width('30%').backgroundColor('#f5f5f5')Column() {if (this.selectedIndex === 0) {Text('首页内容').fontSize(24)} else if (this.selectedIndex === 1) {Text('分类内容').fontSize(24)} else if (this.selectedIndex === 2) {Text('发现内容').fontSize(24)} else {Text('个人中心').fontSize(24)}}.layoutWeight(1).padding(20)}.mode(NavigationMode.Split).minNavBarWidth(200).maxNavBarWidth(300)}
}
页面切换动画
@Entry
@Component
struct AnimatedNavigation {build() {Navigation() {Column() {Button('淡入淡出效果').onClick(() => {router.pushUrl({url: 'pages/DetailPage',transition: {type: RouteType.Push,curve: Curve.EaseInOut,duration: 300}})})Button('滑动效果').onClick(() => {router.pushUrl({url: 'pages/DetailPage',transition: {type: RouteType.Push,slide: SlideEffect.Left}})})}}}
}
实际应用示例
电商应用导航
@Entry
@Component
struct ECommerceApp {@State currentTab: number = 0private tabs: string[] = ['首页', '分类', '购物车', '我的']build() {Navigation() {Column() {// 顶部导航栏Row() {ForEach(this.tabs, (tab, index) => {Button(tab).borderRadius(0).backgroundColor(this.currentTab === index ? '#ff5500' : '#ffffff').fontColor(this.currentTab === index ? Color.White : Color.Black).onClick(() => {this.currentTab = index})})}.width('100%').height(50)// 内容区域Column() {if (this.currentTab === 0) {HomeTab()} else if (this.currentTab === 1) {CategoryTab()} else if (this.currentTab === 2) {CartTab()} else {ProfileTab()}}.layoutWeight(1)}}.hideToolBar(true).hideTitleBar(true)}
}@Component
struct HomeTab {build() {Scroll() {Column() {// 轮播图Swiper() {ForEach(['banner1', 'banner2', 'banner3'], (img) => {Image(img).width('100%').height(200)})}.indicator(true).height(200)// 商品网格Grid() {ForEach(Array.from({ length: 12 }), (_, index) => {GridItem() {Column() {Image(`product_${index + 1}`).width(80).height(80)Text(`商品${index + 1}`).fontSize(14)Text('¥99').fontColor('#ff5500').fontSize(16)}}})}.columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10).margin(10)}}}
}
新闻应用导航
@Entry
@Component
struct NewsApp {@State currentChannel: string = '推荐'private channels: string[] = ['推荐', '热点', '科技', '娱乐', '体育']build() {Navigation() {Column() {// 频道导航Scroll({ scrollable: ScrollDirection.Horizontal }) {Row() {ForEach(this.channels, (channel) => {Button(channel).margin({ right: 15 }).stateEffect(this.currentChannel === channel).onClick(() => {this.currentChannel = channel})})}.padding(10)}.scrollBar(BarState.Off)// 新闻列表Scroll() {Column() {ForEach(Array.from({ length: 10 }), (_, index) => {Column() {Text(`【${this.currentChannel}】新闻标题 ${index + 1}`).fontSize(18).fontWeight(FontWeight.Bold).margin({ bottom: 5 })Text('新闻摘要内容...').fontSize(14).fontColor('#666666').margin({ bottom: 10 })Divider()}.margin({ top: 10, left: 15, right: 15 }).onClick(() => {router.pushUrl({url: 'pages/NewsDetail',params: { id: index + 1 }})})})}}.layoutWeight(1)}}.title('新闻资讯').toolBar({items: [{icon: $r('app.media.ic_search'),action: () => {router.pushUrl({url: 'pages/SearchPage'})}}]})}
}
注意事项
-
页面生命周期:
onPageShow
:页面显示时触发onPageHide
:页面隐藏时触发onBackPress
:返回按钮点击时触发(可拦截返回操作)
-
路由管理:
- 使用
router.pushUrl
导航到新页面 - 使用
router.back
返回上一页 - 使用
router.replaceUrl
替换当前页面 - 使用
router.clear
清空页面栈
- 使用
-
性能优化:
- 避免在导航栏中使用复杂组件
- 对于不常变化的页面考虑使用缓存
- 合理使用分栏模式提升大屏设备体验
-
兼容性考虑:
- 分栏模式在大屏设备上效果更好
- 确保导航结构在小屏设备上也能良好工作
Navigation 组件是构建复杂应用导航系统的基础,合理使用可以创建直观、高效的用户导航体验。在实际开发中,可以根据应用需求结合 Tabs、SideBar 等组件构建更丰富的导航结构。
相关文章:
13.ArkUI Navigation的介绍和使用
ArkUI Navigation 组件介绍与使用指南 什么是 Navigation 组件? Navigation 是 ArkUI 中的导航组件,用于管理页面间的导航和路由。它提供了页面栈管理、导航栏定制、页面切换动画等功能,是构建多页面应用的核心组件。 Navigation 的核心概…...
MYSQL 常用数值函数 和 条件函数 详解
一、数值函数 1、ROUND(num, decimals) 四舍五入到指定小数位。 SELECT ROUND(3.1415, 2); -- 输出 3.142、ABS(num) 取绝对值 SELECT ABS(-10); -- 输出 103、CEIL(num) / FLOOR(num) 向上/向下取整 SELECT CEIL(3.2), FLOOR(3.7); -- 输出 4 和 34、MOD(num1, num2) 取…...
CuML + Cudf (RAPIDS) 加速python数据分析脚本
如果有人在用Nvidia RAPIDS加速pandas和sklearn等库,请看我这个小示例,可以节省你大量时间。 1. 创建环境 请使用uv,而非conda/mamba。 # install uv if not yetcurl -LsSf https://astral.sh/uv/install.sh | shuv init data_gpucd data_g…...
c#操作excel表格
c#操作excel表格有很多方法,本文介绍的是基于Interop.Excel方式。该方式并不是winform操作excel的最好方法,本文介绍该方法主要是为一些仍有需求的小伙伴。建议有兴趣的小伙伴可以看一下miniexcel,该方法更简洁高效。 一、首先需要下载inter…...
【uniapp】vue2 搜索文字高亮显示
【uniapp】vue2 搜索文字高亮显示 我这里是把方法放在公共组件中使用 props: {// 帖子listpostList: {type: Array,required: true},// 搜索文本字体高亮highLightSearch: {type: String,required: false} }, watch: {// 监听 props 的变化postList: {immediate: true,handle…...
Android ActivityManagerService(AMS)深度解析
目录 一、什么是AMS? 二、AMS 的架构层次 1. 客户端层 2. 服务层 3. 底层驱动 三、AMS 的主要功能 四、核心模块与工作流程 1. 核心模块 2. Activity 启动流程 3. 进程启动流程 4. 广播分发流程 五、AMS 的启动流程 1. S…...
C语言中操作字节的某一位
在C语言中,可以使用位操作来设置或清除一个字节中的特定位。以下是几种常见的方法: 设置某一位为1(置位) // 将字节byte的第n位(从0开始计数)设置为1 byte | (1 << n); 例如,将第3位置…...
【特殊场景应对8】LinkedIn式动态简历的利弊分析:在变革与风险间走钢丝
写在最前 作为一个中古程序猿,我有很多自己想做的事情,比如埋头苦干手搓一个低代码数据库设计平台(目前只针对写java的朋友),比如很喜欢帮身边的朋友看看简历,讲讲面试技巧,毕竟工作这么多年,也做到过高管,有很多面人经历,意见还算有用,大家基本都能拿到想要的offe…...
UOJ 228 基础数据结构练习题 Solution
Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an),有 m m m 个操作分三种: add ( l , r , k ) \operatorname{add}(l,r,k) add(l,r,k):对每个 i ∈ [ l , r ] i\in[l,r] i∈[l,r] 执行 …...
工业相机——镜头篇【机器视觉,图像采集系统,成像原理,光学系统,成像光路,镜头光圈,镜头景深,远心镜头,分辨率,MTF曲线,焦距计算 ,子午弧矢】
文章目录 1 机器视觉,图像采集系统2 相机镜头,属于一种光学系统3 常规镜头 成像光路4 镜头光圈5 镜头的景深6 远心镜头 及 成像原理7 远心镜头种类 及 应用场景8 镜头分辨率10 镜头的对比度11 镜头的MTF曲线12 镜头的焦距 计算13 子午弧矢 图解 反差 工业…...
珍爱网:从降本增效到绿色低碳,数字化新基建价值凸显
2024年12月24日,法大大联合企业绿色发展研究院发布《2024签约减碳与低碳办公白皮书》,深入剖析电子签在推动企业绿色低碳转型中的关键作用,为企业实现环境、社会和治理(ESG)目标提供新思路。近期,法大大将陆…...
Java大师成长计划之第3天:Java中的异常处理机制
📢 友情提示: 本文由银河易创AI(https://ai.eaigx.com)平台gpt-4o-mini模型辅助创作完成,旨在提供灵感参考与技术分享,文中关键数据、代码与结论建议通过官方渠道验证。 在 Java 编程中,异常处理…...
主题模型三大基石:Unigram、LSA、PLSA详解与对比
🌟 主题模型演进图谱 文本建模三阶段: 词袋模型 → 潜在语义 → 概率生成 Unigram → LSA → PLSA → LDA 📦 基础模型:Unigram模型 核心假设 文档中每个词独立生成(词袋假设) 忽略词语顺序和语义关联 …...
【Linux网络】TCP服务中IOService应用与实现
📢博客主页:https://blog.csdn.net/2301_779549673 📢博客仓库:https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! &…...
终端运行java出现???
1.检查是否系统区域设置冲突(控制面板 → 区域 → 管理 → 更改系统区域设置 → 勾选 Beta: UTF-8)。 2.修改 Windows 终端编码 方法 1:临时修改(当前窗口) 在终端执行:cmd chcp 65001 …...
Mysql8.0 推出的强大功能 窗口函数(Window Functions)
🧠 一、什么是窗口函数? 窗口函数是 SQL 中一种在保留原始行的基础上,对行进行分组排序后执行聚合、排名、累计等计算的方法。 与传统的 GROUP BY 聚合不同的是: 👉 窗口函数不会把多行聚成一行,而是为每…...
opencv--通道,彩色和灰度
图像的灰度值和颜色值的区别 灰度值(Grayscale Value)和颜色值(Color Value)是描述像素信息的两种基本方式,它们的核心区别在于对颜色信息的表示方式和应用场景。 (1) 灰度值(Grayscale Value)…...
cmake 执行命令
在命令行中执行 CMake 的命令主要用于配置、生成和构建项目。以下是一些常用的 CMake 命令及其用法。 1. 配置项目 配置项目是 CMake 的第一步,它会根据 CMakeLists.txt 文件生成相应的构建系统文件(如 Makefile 或 Visual Studio 解决方案文件&#x…...
Shell脚本-for循环语法结构
在Shell脚本编程中,for循环是一种非常常用的流程控制语句。它允许我们对一系列值进行迭代,并为每个值执行特定的命令或代码块。无论是处理文件列表、遍历目录内容还是简单的计数任务,for循环都能提供简洁而强大的解决方案。本文将详细介绍She…...
【AI落地应用实战】借助 Amazon Q 实现内容分发网络(CDN)CDK 构建的全流程实践
随着生成式 AI 技术的快速发展,开发者在构建云原生应用时正以前所未有的效率推进项目落地。而 Amazon Q,作为亚马逊云科技推出的专为开发者和 IT 人员设计的生成式 AI 助手,正逐步改变着我们与代码、基础设施以及 亚马逊云科技 服务交互的方式…...
Windows同步技术-使用命名对象
在 Windows 系统下使用命名对象(如互斥体、事件、信号量、文件映射等内核对象)时,需注意以下关键要点: 命名规则 唯一性:名称需全局唯一,避免与其他应用或系统对象冲突,建议使用 GUID 或应用专…...
Python Cookbook-6.8 避免属性读写的冗余代码
任务 你的类会用到某些 property 实例,而 getter 或者 setter 都是一些千篇一律的获取或者设置实例属性的代码。你希望只用指定属性名,而不用写那些非常相似的代码。 解决方案 需要一个工厂函数,用它来处理那些 getter 或 setter 的参数是…...
热带气旋【CH报文数据插值】中央气象台-台风路径数据每小时插值
对CH报文数据进行每小时插值 原始数据文件 数据 三小时一次的报文数据 需求 按小时补齐热带气旋路径信息 插值后数据效果如下: 插值代码 # 对ch文件插值import pandas as pd import datetime import osdef interpolate_ch_one_hour (file_name):new_file_name…...
06-stm32时钟体系
一、时钟体系 1、概念 1.时钟信号:是一种周期性的电信号,例如为方波,正弦波,余弦波等各种波形,用于同步数字电路中的各种操作,它控制着数据的传输以及电路状态的变化。 2、时钟系统在 STM32 的系统中扮演…...
Hbase集群管理与实践
一、HBase集群搭建实战 1.1 环境规划建议 硬件配置基准(以10节点集群为例): 角色CPU内存磁盘网络HMaster4核16GBSSD 200GB(系统盘)10GbpsRegionServer16核64GB124TB HDD(JBOD)25GbpsZooKeepe…...
基于大模型对先天性巨结肠全流程预测及医疗方案研究报告
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、大模型在先天性巨结肠预测中的理论基础 2.1 大模型概述 2.2 大模型预测先天性巨结肠的可行性分析 三、术前预测与准备方案 3.1 大模型对术前病情的预测 3.1.1 疾病确诊预测 3.1.2 病情严重程度评估 3.2 …...
计算机组成原理-408考点-数的表示
常见题型:C语言中的有符号数和无符号数的表示。 【例】有如下C语言程序段: short si-32767;unsigned short usisi;执行上述两条语句后,usi的值为___。short和unsigned short均使用16位二进制数表示。 【分析】考点:同…...
vue滑块组件设计与实现
vue滑块组件设计与实现 设计一个滑块组件的思想主要包括以下几个方面:用户交互、状态管理、样式设计和事件处理。以下是详细的设计思想: 1. 用户交互 滑块组件的核心是用户能够通过拖动滑块来选择一个值。因此,设计时需要考虑以下几点&…...
Linux阻塞与非阻塞I/O:从原理到实践详解
Linux阻塞与非阻塞I/O:从原理到实践详解 1. 阻塞与非阻塞I/O基础概念 1.1 阻塞与非阻塞简介 在Linux系统编程中,I/O操作可以分为两种基本模式:阻塞I/O和非阻塞I/O。这两种模式决定了当设备或资源不可用时,程序的行为方式。 阻…...
form表单提交前设置请求头request header及文件下载
需求:想要在form表单submit之前,设置一下请求头。 除了用Ajax发起请求之外,还可以使用FormData来实现,咱不懂就问。 1 问:FormData什么时间出现的?与ajax什么联系? 2 问:FormData使…...
整合 CountVectorizer 和 TfidfVectorizer 绘制词云图
本文分别整合 CountVectorizer 和 TfidfVectorizer 绘制词云图 ✨ CountVectorizer CountVectorizer 是 scikit-learn 中用于 文本特征提取 的一个工具,它的主要作用是将一组文本(文本集合)转换为词频向量(Bag-of-Words…...
国产AI大模型超深度横评:技术参数全解、商业落地全场景拆解
评测方法论与指标体系 评测框架设计 采用三层评估体系,涵盖技术性能、商业价值、社会效益三大维度,细分为12个二级指标、36个三级指标: 测试环境配置 项目配置详情硬件平台8NVIDIA H100集群,NVLink全互联,3TB内存软…...
Shell脚本-流程控制语句应用案例
在Shell脚本编程中,流程控制语句是实现逻辑控制和自动化任务处理的关键。通过合理运用条件判断、循环等流程控制语句,可以编写出高效、灵活的脚本程序。本文将通过几个实际的应用案例来展示如何使用这些流程控制语句解决具体的编程问题。 案例一&#x…...
HarmonyOS NEXT应用开发-Notification Kit(用户通知服务)notificationManager.addSlot
1.notificationManager.addSlot 支持设备Phone2in1TabletCarWearable addSlot(type: SlotType, callback: AsyncCallback<void>): void 创建指定类型的通知渠道。使用callback异步回调。 系统能力:SystemCapability.Notification.Notification 示例…...
计算机网络核心知识点全解析(面试通关版)
一、网络体系结构:从OSI到TCP/IP的分层设计 1.1 七层模型与四层模型对比 OSI七层模型核心功能TCP/IP四层对应典型协议生活类比应用层为应用程序提供服务(如文件传输、邮件、Web浏览)应用层HTTP、FTP、SMTP、DNS快递面单信息(收件…...
表示学习与部分域适应
表示学习(Representation Learning) 表示学习是机器学习的一个分支,旨在自动从原始数据中提取有意义的特征或表示,使得这些表示更适合后续任务(如分类、检测、回归等)。其核心思想是将高维、复杂、冗余的原…...
AI与思维模型【77】——PDCA思维模型
一、定义 PDCA思维模型是一种用于持续改进和优化工作流程、项目实施以及问题解决的科学管理方法。它由四个英文字母组成,分别代表计划(Plan)、执行(Do)、检查(Check)和处理(Act&…...
Flink 系列之七 - Data Stream API的源算子原理
之前做过数据平台,对于实时数据采集,使用了Flink。现在想想,在数据开发平台中,Flink的身影几乎无处不在,由于之前是边用边学,总体有点混乱,借此空隙,整理一下Flink的内容,…...
使用 SSE + WebFlux 推送日志信息到前端
为什么使用 SSE 而不使用 WebSocket, 请看 SEE 对比 Websocket 的优缺点。 特性SSEWebSocket通信方向单向(服务器→客户端)双向(全双工)协议基于 HTTP独立协议(需 ws:// 前缀)兼容性现代浏览器(…...
Java多线程同步有哪些方法?
大家好,我是锋哥。今天分享关于【Java多线程同步有哪些方法?】面试题。希望对大家有帮助; Java多线程同步有哪些方法? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Java 中,多线程同步是确保多个线程在访问共享资源时不会…...
Java—数 组
数组就是一个容器,用来存一批同种类型的数据。 一、静态初始化数组 1.1 定义方式 语法: 完整格式:数据类型 [ ] 数组名 new 数据类型 []{ 元素 1 ,元素 2 ,元素3… };简化格式:数据类型 [ ] 数组名 {…...
iOS/Android 使用 C++ 跨平台模块时的内存与生命周期管理
在移动应用开发领域,跨平台开发已经成为一种不可忽视的趋势。随着智能手机市场的持续扩张,开发者需要同时满足iOS和Android两大主流平台的需求,而这往往意味着重复的工作量和高昂的维护成本。跨平台开发的目标在于通过一套代码库实现多平台的支持,从而降低开发成本、加速产…...
为什么vue的key值,不用index?
在 Vue 中,key 的作用是帮助框架高效地识别和复用 DOM 节点或组件实例。使用数组索引 (index) 作为 key 值可能会导致以下问题,因此通常不建议这样做: 1. 列表数据变化时,可能导致错误的 DOM 复用 问题:当列表的顺序…...
Hi3516CV608 超高清智慧视觉 SoC 芯片 可提供开发资料
Hi3516CV608 超高清智慧视觉SoC 产品简介 总体介绍 Hi3516CV608是一颗面向消费类市场的IPC SoC,在新一代视频编解码标准、网络安全、隐私保护和人工智能方面引领行业发展。主要应用于室内外场景下的云台机、枪机、球机、枪球一体机、双目长短焦机等产品形态&#…...
Flink部署与应用——部署方式介绍
引入 我们通过Flink相关论文的介绍,对于Flink已经有了初步理解,这里简单的梳理一下Flink常见的部署方式。 Flink 的部署方式 StandAlone模式 介绍 StandAlone模式是Flink框架自带的分布式部署模式,不依赖其他的资源调度框架,…...
数据挖掘技术与应用课程论文——数据挖掘中的聚类分析方法及其应用研究
数据挖掘中的聚类分析方法及其应用研究 摘要 聚类分析是数据挖掘技术中的一个重要组成部分,它通过将数据集中的对象划分为多个组或簇,使得同一簇内的对象具有较高的相似性,而不同簇之间的对象具有较低的相似性。 本文系统地研究了数据挖掘中的多种聚类分析方法及其应用。首先…...
SIEMENS PLC程序解读 ST 语言 车型识别
1、ST程序代码 IF #Type1_MIX < #CFG_Type.Type.CT AND #CFG_Type.Type.CT < #Type1_MAX AND #CFG_Type.Type.CT<>0 THEN#Type[1] : 1;FOR #I : 0 TO 39 DOIF #CFG_Type.Type.CT/10 (#Type1_MIX 10 * #I)/10 THEN#Sub_Type."1"[#I 1] : 1;END_IF; E…...
神经网络基础[损失函数,bp算法,梯度下降算法 ]
关于神经网络的基础的概念可以看我前面的文章 损失函数 在深度学习中, 损失函数是用来衡量模型参数的质量的函数, 衡量的方式是比较网络输出和真实输出的差异 作用:指导模型的训练过程,通过反向传播算法计算梯度,从而更新网络的参数,最终使…...
python打印颜色(python颜色、python print颜色、python打印彩色文字、python print彩色、python彩色文字)
文章目录 python怎么打印彩色文字1. 使用ANSI转义码:2. 使用colorama库(更好的跨平台支持):3. 使用termcolor库: python怎么打印彩色文字 在Python中打印彩色文字有几种方法: 1. 使用ANSI转义码ÿ…...
数字域残留频偏的补偿原理
模拟域的频谱搬移一般通过混频器实现。一般情况下模拟域调整完频偏后数字域还会存在一部分残留频偏这部分就需要在数字域补偿。原理比较简单本文进行下粗略总结。首先我们需要了解下采样具体可参考下信号与系统笔记(六):采样 - 知乎。 采样前和采样后,角…...