鸿蒙移动应用开发基础 课件 项目4 运用页面切换与自定义组件-实现主页面布局效果

项目4运用页面切换与自定义组件-实现主页面布局效果鸿蒙移动应用开发基础授课：沙雨彤学习网站/#/cn/home/consumer/cn/doc//mainPlay/course/246260023.html目录01页面切换组件的使用0203自定义组件的使用任务1实施：主页面整体布局的设计04任务2实施：主页面总体布局的实现本章学习目标熟练掌握核心容器组件Swiper与Tabs：掌握自动轮播、循环播放等Swiper属性，灵活运用Tabs实现顶部、侧边等多种布局的内容切换。List/Grid与Scroll：利用列表和网格高效展示海量数据，结合滚动容器实现复杂长页面的流畅交互与内容承载。掌握自定义组件开发组件化核心思想：理解自定义组件封装逻辑，通过组件化开发实现代码复用，降低系统耦合度，提升项目的可维护性。生命周期管理：深入掌握组件创建、挂载、更新、销毁的完整生命周期，合理在不同阶段处理数据请求与资源释放。核心价值：通过系统学习渲染机制、核心容器与组件化开发，构建规范、高效、可扩展的现代化应用界面架构。页面切换组件的使用011.1Swiper组件的使用

Swiper是什么？容器级翻页引擎01Swiper定义Swiper是一个容器组件，通过包裹SwiperItem子组件实现页面切换。每个子组件对应一个独立页面，支持横向或纵向滑动。02经典场景Swiper广泛应用于轮播图和引导页。轮播图用于展示多张图片或广告，引导页用于新用户引导或功能介绍。03子组件与页面关系Swiper中子组件数量等于页面数量，子组件越多，页面越多，便于灵活构建多页面滑动效果。1.2Swiper组件的属性

Swiper属性概览Swiper组件拥有七大常用属性：index设置初始页，autoPlay控制自动轮播，interval定义轮播间隔，loop决定循环播放，vertical切换横纵向，indicator显隐指示器，duration指定滑动动画时长。这些属性共同决定了Swiper的行为和外观。1.3Swiper组件的属性

Swiper属性属性名类型说明indexnumber初始显示的子组件索引（默认0）autoPlayboolean是否自动轮播（默认false）intervalnumber自动轮播间隔时间（单位：ms，默认3000）loopboolean是否循环播放（默认true）verticalboolean滑动方向（false为横向，true为纵向，默认false）indicatorboolean是否显示页面指示器（默认true）durationnumber滑动动画时长（单位：ms，默认400）1.4代码实战代码结构使用swiper()声明容器，通过链式调用设置属性。例如：swiper().width('100%').height(150).index(0).indicator(true).autoPlay(true)，实现尺寸、初始页、指示器和自动播放的设置。尺寸设置通过width和height属性固定Swiper的尺寸，确保页面布局稳定。例如：.width('100%').height(150)，使Swiper宽度占满父容器，高度为150px。初始页与指示器使用index设置初始显示的页面索引，默认为0。通过indicator属性控制页面指示器的显示，默认为true。例如：.index(0).indicator(true)，初始显示第一页并显示指示器。自动播放通过autoPlay属性设置自动轮播，默认为false。开启自动播放后，Swiper会按照设定的间隔时间自动切换页面。例如：.autoPlay(true)，开启自动轮播功能。1.5事件监听onChange：滑动即回调onChange机制onChange事件在滑动切换页面完成后触发，回调函数携带当前页索引参数。通过监听该事件，可以实时获取当前页面索引，实现页面状态的动态更新。实际应用在onChange回调中，可以更新外部变量、请求接口或进行埋点统计。例如：onChange((index)=>{console.log(`当前页索引：${index}`)})，打印当前页索引。1.5事件监听onClick：点击当前页onClick事件onClick事件在点击当前页面时触发，无参数返回。适用于整页跳转、弹窗展示或埋点收集等场景。示例代码示例代码：.onClick(()=>{console.log('点击当前页')})，点击页面时在控制台打印信息。与onChange对比onClick与onChange触发时机不同，滑动不点击时触发onChange，点击不滑动时触发onClick。两者结合可实现丰富的交互逻辑。1.6代码演练轮播图闭环实现代码实现使用swiper()包裹三个SwiperItem，设置autoPlay、interval、indicator、duration等属性，实现自动轮播、手动滑动和页面指示器功能。事件绑定绑定onChange记录当前索引，onClick触发页面跳转逻辑，实现完整的轮播图交互功能。代码示例//swiper(){//子组件，每一个组件就是一个轮播页面}.width('100%').height(150)index(0)//默认显示第一页.indicator(true)//显示页面指示器.autoPlay(true)//设置自动播放‌‌

Swiper(){//子组件，每一个组件就是一个页面}.onChange((index:number)=>{console.log(`当前页索引：${index}`)})‌onClick‌：点击当前页时触发Swiper(){//子组件，每一个组件就是一个页面}.onClick(()=>{console.log('点击当前页')})1.2Tabs组件的使用

Tabs三位一体：TabBar导航+TabContent内容Tabs组件构成Tabs组件由TabBar导航栏和TabContent内容区组成，二者相互配合，实现多页签的切换功能。布局形态根据TabBar的位置，Tabs组件可以分为顶部导航、底部导航和侧边导航三种布局形态，以满足不同的场景需求。默认布局在默认情况下，Tabs采用垂直布局，TabBar位于顶部，内容区位于下方，这种布局适合大多数的页面展示。控制器作用通过TabsController控制器，可以实现对Tabs组件的切换行为进行管理，为后续的动态操作提供支持。1.2Tabs组件的使用Tabs组件基本布局1.2.1Tab组件的属性Tab组件属性四大核心参数Tabs组件的四大核心参数包括barPosition控制TabBar位置、index设置初始激活的Tab页索引、scrollable允许Tab栏横向滚动以及vertical设置垂直布局。这些参数共同决定了Tabs组件的基本行为和外观。1.2.1Tab组件的属性Tab组件属性属性作用scrollable设置是否可以通过滑动页面进行页面切换。默认值：true，可以通过滑动页面进行页面切换。为false时不可滑动切换页面vertical是否为纵向Tab。默认值：false，横向Tabs，为true时纵向TabbarMode设置TabBar布局模式，默认值：BarMode.Fixed（所有TabBar会平均分配barWidth宽度，纵向时平均分配barHeight高度）。可选参数还有141BarMode.Scrollable（所有TabBar都使用实际布局宽度，超过总宽度，横向Tabs的barWidth，纵向Tabs的barHeight后可滑动）barWidth设置TabBar的宽度值。设置为小于0或大于Tabs宽度值时，按默认值显示。barHeight设置TabBar的高度值。横向Tabs可以设置height为'auto'，让TabBar自适应子组件高度。height设置为小于0或大于Tabs高度值时，按默认值显示1.2.2代码实战从零手写三栏社交标签页外层布局使用Column组件作为外层容器，设置宽度和高度为100%，并添加padding产生留白效果，为Tabs组件提供全屏展示的空间。Tabs组件配置在Tabs组件中，通过设置barPosition为Start，将TabBar放置在顶部，并绑定TabsController控制器，实现对标签页的管理。TabContent内容每个TabContent内部使用Column组件，设置宽度和高度为100%，并通过不同的背景色区分各个标签页的内容区域，便于开发调试。1.2.2代码实战代码示例//使用@Entry装饰器标记为程序入口组件，@Component声明为自定义组件@Entry@ComponentstructSideBarContainerTest{//创建Tabs控制器，用于管理Tabs组件的切换行为privatecontroller:TabsController=newTabsController();build(){//外层垂直布局容器，占满全屏并设置10单位内边距Column(){//标签页容器组件Tabs({//未设置vertical属性，默认垂直方向布局（上下结构）barPosition:BarPosition.Start,//标签栏位置在布局起始端（默认顶部）controller:this.controller//绑定标签控制器}){1.2.2代码实战代码示例//第一个标签页TabContent(){//标签页内容使用垂直布局容器Column().width('100%')//撑满父容器宽度.height('100%')//撑满父容器高度.backgroundColor("#aabbcc")//临时测试背景色}.size({width:"100%",height:"100%"})//标签页内容区尺寸.tabBar("消息")//设置标签栏显示文本

//第二个标签页TabContent(){Column().width('100%').height('100%').backgroundColor("#bbccaa")}.size({width:"100%",height:"100%"}).tabBar("联系人")1.2.2代码实战代码示例//第三个标签页TabContent(){Column().width('100%').height('100%').backgroundColor("#ccaabb")}.size({width:"100%",height:"100%"}).tabBar("动态")}.size({width:"100%",height:"100%"})//Tabs容器占满父Column}.width('100%')//外层容器宽度撑满.height('100%')//外层容器高度撑满.padding(10)//整体内边距，产生留白效果}}1.2.3运行效果自定义组件的使用022.1自定义组件的定义01自定义组件的定义自定义组件是开发者根据自身需求创建的组件，具备特定功能与样式，可在鸿蒙开发中复用，减少重复代码。02自定义组件的用途例如，创建一个自定义按钮组件，可统一设置样式与点击事件逻辑，便于在多个页面中使用，提升开发效率。03自定义组件的优势使用自定义组件能够提高代码的可维护性，同时保持界面的一致性，便于团队协作与项目扩展。2.2自定义组件的命名与结构命名要求自定义组件名称需遵循驼峰命名法，如MyCustomComponent，且应具有描述性，避免使用保留关键字。命名示例例如，创建一个自定义的头像组件，可命名为UserProfileImage，清晰表达组件的功能与用途。结构规则2.2自定义组件的命名与结构结构规则结构组成自定义组件通常包含build方法，用于定义组件的界面结构，这是组件的核心部分。基础组件使用在build方法中，可以使用各种基础组件，如Text、Button等，来构建界面。容器组件使用同时，也可以使用容器组件，如Column、Row等，来组织和布局基础组件。结构示例例如，一个简单的自定义组件可以包含一个Column容器，内部放置多个Text组件。2.3属性传递和事件通信属性定义属性定义如果需要向自定义组件传递数据，可以使用@Prop装饰器定义属性，如@Prop()title:string=''，方便组件接收外部数据。2.3属性传递和事件通信事件通信01事件发射器定义自定义组件可以通过@Event装饰器定义事件发射器，如@Event()onMyEvent:()=>void，用于向外传递事件。02事件触发在组件内部，可以通过调用事件发射器来触发事件，通知父组件或其他组件。03事件监听父组件可以通过监听自定义组件的事件，来响应组件内部的状态变化或用户操作。任务1实施：主页面整体布局的设计03主页面整体布局设计顶部导航与搜索区展示App标题并集成核心岗位搜索功能，通过自定义Header组件实现，为用户提供直观的检索入口，是页面视觉的第一焦点。中间内容展示区以List组件为基础纵向排布，整合Banner广告、功能菜单、公告通知等核心业务信息，是用户获取服务的核心视觉区域。底部功能导航区采用TabsMenu组件构建，提供首页、招聘、发布等核心功能的快速切换入口，确保用户操作路径的清晰与便捷。采用“纵向分层+组件化”思路，实现清晰的视觉层级与流畅的交互体验，适配移动端用户浏览习惯。任务2实施：主页面总体布局的实现04步骤1：创建鸿蒙应用项目01.启动开发工具打开DevEcoStudio鸿蒙应用开发工具，进入启动欢迎界面，准备开始项目创建流程。02.新建空白项目在欢迎页中点击“CreateNewProject”，进入项目模板选择与配置的引导页面。03.选择应用模板在模板列表中选择“EmptyAbility”空模板，这是构建鸿蒙应用最基础、最灵活的起始模板。04.关键参数配置设置项目名称为“JiuYe_Index”，自定义BundleName（如com.example.jiuyeindex），并在开发语言中选择ArkTS，确保工程结构符合鸿蒙规范。05.完成项目初始化确认所有配置无误后点击“Finish”，等待DevEcoStudio自动下载依赖并初始化项目环境，完成鸿蒙应用项目的创建准备。步骤2：准备图片资源核心操作流程1定位资源目录：在项目结构中找到`entry/src/main/resources/`路径，若不存在`rawfile`文件夹，请手动创建该目录。2添加图片素材：将实训所需的图标、Banner、菜单等图片文件（如icon_back.png、banner1.jpg）直接复制到新建的`rawfile`文件夹内。关键注意事项严格校验文件名：代码中引用的文件名必须与实际文件名（包括大小写、后缀扩展名）完全一致，否则会导致资源加载失败。规范图片格式：优先使用兼容性强的通用格式，如JPG（用于色彩丰富的大图）和PNG（用于透明背景或图标），避免使用罕见的图片格式。总结：将图片放入正确的`rawfile`目录，并确保命名精确，是后续代码中成功加载和展示图片的前提。组件开发：Header顶部标题栏▍代码实现(ArkTS)@ComponentexportstructHeader{@Proptitle:ResourceStr='';@Propcolor:ResourceColor='#2778f8';@PropshowBack:boolean=false;build(){Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.SpaceBetween}){this.showBack?Image($rawfile('icon_back.png')).width(30).onClick(()=>router.back()):Column().width(30);Text(this.title).fontSize(16).fontColor(Color.White).bold(true);Column().width(30)}.height(44).backgroundColor(this.color)}}通过封装通用的Header组件，统一了应用的顶部导航视觉规范，减少了重复代码编写，同时利用属性传参让组件具备极强的场景适配能力，提升了整体开发效率。灵活复用使用@Prop定义标题、颜色等属性，适配不同业务页面的视觉需求。布局自适应基于Flex布局实现内容的居中与对齐，自动适配不同屏幕尺寸。交互能力完备内置返回按钮点击事件，集成路由导航，提升用户操作的连贯性。组件开发：Banner轮播图@Component

exportstructBanner{

build(){

//使用Swiper组件实现轮播图效果

Swiper(){

Image($rawfile('banner1.jpg'))

Image($rawfile('banner2.jpg'))

}

.autoPlay(true)//开启自动播放

.borderRadius({topLeft:8,topRight:8})

}

}核心组件：Swiper

鸿蒙ArkTS提供的滑块视图容器，通过组合基础的Image组件，能快速构建流畅的轮播效果，是移动端实现Banner展示的首选方案。自动播放设置autoPlay(true)开启自动轮播，无需用户手动滑动，提升内容展示的流畅度和时效性。视觉优化通过borderRadius设置顶部圆角，让Banner与页面其他元素风格统一，增强界面的精致感。组件开发：Menus功能菜单01.核心代码逻辑解析classMenuInfo{icon:Resource;name:ResourceStr;path:ResourceStr;constructor(i,n,p){this.icon=i;=n;this.path=p;}}//定义MenuInfo数据模型，封装图标、名称与路由路径，实现数据标准化管理Flex({wrap:Wrap,justify:SpaceBetween}){ForEach(menuList,item=>{Flex({col}){Image(item.icon);Text();}})}//使用ForEach循环遍历数组，结合Flex布局的wrap属性，动态生成自适应网格菜单数据驱动分离数据与视图，通过数组统一管理菜单配置，易于维护扩展。高效渲染利用ForEach循环批量渲染元素，代码简洁，执行效率高。灵活布局Flex布局自动换行特性，轻松构建响应式网格，适配不同屏幕。组件开发：Notice公告通知//Notice.ets核心实现逻辑classNoticeData{title:string;time:string;}@ComponentexportstructNotice{@StatenoticeList:NoticeData[]=[];@StateisLoading=false;build(){Column(){if(this.isLoading){LoadingProgress()}else{ForEach(this.noticeList,item=>Flex({justifyContent:SpaceBetween}){Text(item.title).textOverflow({overflow:Ellipsis}).maxLines(1)})}//省略样式属性...}}}通过状态驱动UI渲染，结合Flex弹性布局与循环渲染，实现了可复用、高性能的公告通知列表组件，兼顾了代码的可读性与视觉呈现的精致感。状态动态管理利用isLoading状态变量，精准控制加载中与数据展示的视图切换。Flex嵌套布局结合Flex与Column组件，构建层次清晰、响应式的列表项结构。文本溢出优化配置textOverflow与maxLines，确保长标题优雅展示，提升阅读体验。卡片式视觉运用背景、内边距和圆角属性，打造现代感的卡片式UI设计风格。组件开发：TabsMenu底部导航栏-数据模型//exportClass.etsimportresourceManagerfrom'@ohos.resourceManager';@ObservedV2exportclasstabsMenu{@Tracetitle:string;@Traceimg:resourceManager.Resource;@TraceimgCheck:resourceManager.Resource;@Traceurl:string;@Traceindex:number;constructor(t:string,i:any,ic:any,u:string,idx:number){this.title=t;this.img=i;this.imgCheck=ic;this.url=u;this.index=idx;}}统一数据封装管理将底部导航项的标题、图标资源、选中图标、跳转链接及索引等核心属性封装为`tabsMenu`类，实现数据结构标准化，便于统一维护与复用。响应式状态观察机制利用`@ObservedV2`和`@Trace`装饰器建立数据与UI的绑定关系，当导航项的选中状态或属性变更时，能自动触发UI重渲染，确保视图实时同步更新。💡核心价值：标准化的数据模型设计不仅提升了代码的可维护性，更通过响应式系统保障了交互状态的一致性。组件开发：TabsMenu底部导航栏-组件实现▍核心代码实现(TypeScript)import{tabsMenu}from"../common/exportClass";importrouterfrom'@ohos.router';@ComponentexportstructTabsMenu{@PropcurrentIndex:number=1;TabsMenu:Array<tabsMenu>=[/*初始化数据*/];build(){Row(){Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.End,alignItems:ItemAlign.End}){ForEach(this.TabsMenu,(item:tabsMenu)=>{Column({space:5}){if(this.currentIndex==item.index){Image(item.imgCheck).width(20)}else{Image(item.img).width(20)}Text(item.title).fontSize(12).fontColor(this.currentIndex==item.index?'#288cc8':'#000')}.width('100%').onClick(()=>{router.replaceUrl({url:item.url})})})}.height("100%").backgroundColor(Color.White)}}选中状态的动态视觉管理通过比较`currentIndex`与`item.index`，动态切换图标资源与文字颜色，实现了清晰的选中态视觉反馈，提升用户交互感知。基于路由的页面跳转机制为每个标签项绑定点击事件，集成`router.replaceUrl`实现无历史栈累积的页面跳转，优化应用内存与导航体验。工具类开发：UiApi//UiApi.ets核心实现importwindowfrom'@ohos.window';exportdefaultclass{staticsetStatusBarColor(context){