《HarmonyOS应用开发基础》 课件 实操 项目2-任务11 开发主页.pptx

任务11开发主页项目2走进ArkTS声明式开发

任务11开发主页本任务使用Tabs组件，开发主页面中的“主页”、“场景”、“我的”这3个页签，并实现对应内容页的页面切换。任务描述

任务效果图预览

任务实施

010203整理工程资源tabBar的布局分析构建自定义的tabBar04在Tabs中实现主页功能

01整理工程资源

选中与未选中的状态可以用不同的图片实现，将任务需要的图片放到media目录下。

02tabBar的布局分析Tabs中的每一个tabBar，布局设计是一样的，可以使用Column布局包裹住一个Image组件和一个Text组件实现。

03构建自定义的tabBar在Index.ets中编写代码，使用@Builder快速构建自定义的tabBar，命名为tabBuilder。在tabBuilder中，根据Tabs的控制器返回的当前页签的选中下标，更改选中与未选中时的图标和文字颜色，添加单击tabBar时通过控制器进行页面切换的事件处理。

04在Tabs中实现主页功能在Index.ets中的build()中编写代码，使用Tabs组件，在Tabs组件中设置3个TabContent；给每个TabContent使用自定义的tabBar，传入选中/未选中时使用的图标和当前tabBar的索引；每个TabContent中的内容组件先用Text组件来模拟。

任务11开发主页本任务使用Tabs组件开发了App中常见的主页页面切换，针对每个tabBar都需要设置选中与未选中时的图标和文字，构建了自定义的tabBar。任务小结