《移动应用开发技术与实战（ArkTS）》课件 项目8-导航组件与页面路由

08导航组件与页面路由01导航组件页面路由项目实训导航组件8.1.1导航组件概述01

引导用户在不同页面/模块间切换的基础工具。定义：导航组件类型作用导航栏（NavigationBar）位于页面顶部，用于显示当前页面的标题和提供返回按钮等弹窗（Dialog）用于显示提示信息，收集用户输入侧边栏（Drawer）用于提供快速导航到不同页面的功能Tab栏（TabBar）用于在多个页面或功能模块之间进行切换底部导航栏（BottomNavigation）通常位于应用的底部，用于提供快速导航页面路由项目实训导航组件8.1.2创建各种弹窗-简单提示弹窗01用途：显示简短操作提示（成功/失败）。核心API：promptAction.showDialog()

import{promptAction}from'@kit.ArkUI';promptAction.showDialog({title:'提示',message:'这是一个简单的提示弹窗',buttons:[{text:'确定',color:'#007DFF',action:()=>{...}}]});

页面路由项目实训导航组件8.1.2创建各种弹窗-带输入框弹窗02用途：收集用户输入（如登录、反馈）。实现方式：使用@CustomDialog装饰器自定义组件。@CustomDialogstructInputDialog{@StateinputValue:string='';build(){Column(){Text('请输入您的意见')TextInput({placeholder:'...'}).onChange((value:string)=>{this.inputValue=value;})Row(){Button('提交').onClick(()=>{/*获取this.inputValue*/})Button('取消').onClick(()=>{promptAction.dismissDialog();})...letcontroller=newCustomDialogController({builder:InputDialog()});controller.open();

页面路由项目实训导航组件8.1.2创建各种弹窗-带进度条弹窗03用途：显示操作进度（如下载、加载）。核心API：LoadingProgress.show(),updateProgress(),hide()import{LoadingProgress}from'@kit.ArkUI';LoadingProgress.show({message:'正在加载...',progress:50});LoadingProgress.updateProgress(75);//更新进度LoadingProgress.hide();//关闭弹窗

页面路由项目实训导航组件8.1.2创建各种弹窗-其他类型弹窗自定义样式弹窗：通过@CustomDialog自定义背景、文字、按钮颜色。多按钮弹窗：使用promptAction.showActionSheet()，提供多种操作选项（删除、取消、重试）。图标/图片弹窗：在@CustomDialog内使用Image组件，增强视觉效果。自定义内容弹窗：使用promptAction.openCustomDialog()与@Builder，嵌入任意UI内容。动画效果弹窗：在@CustomDialog组件上使用.transition()属性设置动画。滚动内容弹窗：在@CustomDialog内使用Scroll组件展示长内容。弹窗类型更多实用弹窗页面路由项目实训导航组件8.1.3导航栏样式-基础设置01导航栏样式-基础与自定义基本样式：设置背景色、标题色、按钮可见性。Navigation(){...}.title('页面标题').backgroundColor(...).titleColor(Color.Black).hideBackButton(false)

添加自定义按钮：使用.buttons()属性。添加自定义图标：使用.icon()属性显示Logo。设置透明度/阴影：使用.opacity()和.shadow()属性。页面路由项目实训导航组件8.1.3导航栏样式-交互与动态01导航栏样式（2/3）-动态与响应式02动画效果：使用.animation()属性。自定义样式：使用.customStyle()配合@Styles。03动态更新：通过NavigationController的setTitle(),setBackgroundColor(),setButtonColor()方法。响应式设计：结合媒体查询或设备信息，动态切换@State变量绑定的样式属性。页面路由项目实训导航组件8.1.3导航栏样式-高级定制交互式样式：为按钮设置悬停和点击颜色（.interactiveStyle）。渐变背景：使用LinearGradient对象。自定义布局：使用.layout()调整标题和按钮位置。动态内容更新：通过NavigationController的setButtons()方法。无障碍支持：使用.accessibilityDescription()和.accessibilityLevel属性，支持屏幕阅读器。自定义组件：使用.customComponents()嵌入搜索框、头像等复杂UI。高级定制导航栏样式（3/3）-高级与无障碍02页面路由导航组件项目实训页面路由8.2.1页面路由概述01定义：管理页面跳转与数据传递的核心机制，保持应用流畅与一致。核心对象：router（来自@kit.ArkUI），提供丰富的路由操作API。配置：在main_pages.json文件中定义页面路径与关系。{"src":["pages/Index","pages/Details"]}

导航组件项目实训页面路由8.2.2页面跳转和后退02基础路由操作：跳转与后退页面跳转：router.pushUrl()作用：导航到新页面。router.pushUrl({url:'pages/Details',params:{id:123}});

*页面后退：router.back()*作用：返回上一页面。*示例：router.back();导航组件项目实训页面路由8.2.3页面栈03核心概念：页面栈定义：管理页面跳转历史的数据结构。操作（Navigation组件专用）：操作方法说明页面入栈pageStack.pushPath({name:"Page"})添加新页面到栈顶页面出栈pageStack.pop()

移除栈顶页面（返回）页面替换pageStack.replacePath({name:"Page"})

替换当前页面导航组件项目实训页面路由8.2.4路由模式路由模式：标准与嵌套标准模式：每个页面独立路由路径，跳转独立。嵌套模式：一个页面可包含多个子页面，形成层级关系。常用Navigation+NavDestination组件实现。嵌套模式示例（展示教材中ParentPage、IndexPage、DetailsPage的核心代码结构，突出Navigation、NavDestination和NavPathStack的配合）。导航组件项目实训页面路由8.2.5路由转参流程代码发送参数：在router.pushUrl()的params属性中传递对象。接收参数：在目标页面使用router.getParams()或this.$route.params获取。源页面：router.pushUrl({url:'...',params:{param1:"value1"}})目标页面：constparams=router.getParams();路由转参路由转参：页面间数据传递导航组件项目实训页面路由8.2.6组件与页面生命周期函数页面级生命周期：onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()组件级生命周期：aboutToAppear(),aboutToDisappear()用途：初始化、数据加载、状态保存、资源释放等。示例：展示一个包含关键生命周期函数的代码框架。03项目实训导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训1实现商品列表页面。2．实现商品详情页面。3．实现购物车页面。任务要求编写一个简单的电商购物应用，实现基础的页面导航和数据传递功能。导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训11.建模型与数据准备：构建商品与购物车的数据模型，并创建本地数据持久化工具类，用于管理购物车数据的增删改查，为后续的跨页面数据流转提供基础支撑。2.实现商品列表页与页面跳转：使用列表组件渲染商品数据。体现页面路由知识：当用户点击商品卡片时，调用路由对象的pushUrl方法，实现从列表页到详情页的页面跳转；同时体现路由转参知识，将当前商品的编号作为参数放入params中传递给目标页面。页面顶部集成购物车图标，实时显示购物车商品总数。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训13.实现商品详情页与参数接收：展示商品的详细信息。体现生命周期与路由转参知识：在组件即将出现的生命周期函数中，调用路由对象的getParams方法接收上一页传递过来的商品编号参数，据此查询并加载完整的商品数据。页面底部提供“加入购物车”按钮，点击后调用数据工具写入数据。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训14.实现购物车页面与页面后退：展示已加入购物车的商品列表，支持修改数量、删除商品及自动计算总价。体现页面后退知识：当用户点击顶部的返回按钮时，调用路由对象的back方法，实现页面后退操作，将页面栈顶的购物车页面出栈，返回到上一级页面。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训15.跨页面数据同步与生命周期管理：体现生命周期管理知识：利用自定义的事件发射器解决多页面间的数据同步问题（如列表页和详情页的购物车角标更新）。在组件即将出现的生命周期中注册事件监听以刷新数据，在组件即将消失的生命周期中注销事件监听，防止内存泄漏，确保页面路由切换过程中的状态一致性。任务步骤：样式复用UI结构复用项目实训项目实训8.2-社交应用项目实训2

1．实现用户动态列表页面。2．实现动态详情页面。3．实现评论弹窗功能。任务要求编写一个简单的社交应用，实现用户动态展示和评论功能。。导航组件页面路由项目实训项目实训8.2-社交应用项目实训21.建模型与数据准备：构建动态和评论的数据模型，包含动态内容、点赞数、评论数等字段。创建本地数据管理工具类处理点赞和评论逻辑，以及事件发射器用于跨组件通信。2.实现动态列表页与页面跳转：使用列表组件渲染动态流。体现页面路由知识：当用户点击动态卡片时，调用路由对象的pushUrl方法跳转到动态详情页，并通过params将当前动态的编号传递过去。体现