网站导航一定要一样吗向国旗致敬做时代新人网站
本节任务
-
使用tabs组件搭建ui框架
包含页签：首页、动态、发布，会员购、我的。
涉及内容：
- Tabs、TabContent组件
- @Builder装饰器
- 属性模型封装，包括：接口、枚举、常量
界面原型
1 Tabs布局
在MainPage（如果没有创建该页面需提前创建）中删除原有代码，仅保留框架代码：
@Entry
@Component
struct MainPage {build() {}
}
使用tabs布局：
Tabs({barPosition:BarPosition.End}){TabContent(){Text('首页')}.tabBar('首页')TabContent(){Text('动态')}.tabBar('动态')TabContent(){Text('发布')}.tabBar('发布')TabContent(){Text('会员购')}.tabBar('会员购')TabContent(){Text('我的')}.tabBar('我的')}.width('100%').height('100%')
预览效果：
2 TabBuilder定制
准备tab图标，可以统一图标风格，方便后续扩展：
https://iconpark.oceanengine.com/official
1)首先定义变量，保存当前页面索引
...
struct MainPage {@State pageIndex: number = 0;//页面索引...
2)封装tabitem
在ets下新建文件夹，命名为model，在model中新建arkts文件，命名为TabItemModel.
对tab进行封装：
export interface TabItem {icon: Resource;icon_selected: Resource;title?: string;id: number;
}//tab id
export enum TabID {HOME, //首页COMMUNITY, //动态PUBLISH, // 发布SHOPPING, // 会员购MINE //我的
}export const TabItemList: TabItem[] = [{icon:$r('app.media.home0'),icon_selected:$r('app.media.home1'),title: '首页',id: TabID.HOME},{icon:$r('app.media.dongtai0'),icon_selected:$r('app.media.dongtai1'),title: '动态',id: TabID.COMMUNITY},{icon:$r('app.media.fabu0'),icon_selected:$r('app.media.fabu1'),id: TabID.PUBLISH},{icon:$r('app.media.shopping0'),icon_selected:$r('app.media.shopping1'),title: '会员购',id: TabID.SHOPPING},{icon:$r('app.media.mine0'),icon_selected:$r('app.media.mine1'),title: '我的',id: TabID.MINE}
]
3）开始定制tabbar，在MainPage组件内编写代码：
@Builder MyTabBuilder(idx: number){Column() {Image(idx === this.pageIndex ? TabItemList[idx].icon_selected: TabItemList[idx].icon).width(32).height(32)Text(TabItemList[idx].title).fontSize(14).fontWeight(FontWeight.Bold).fontColor(this.pageIndex === idx ? '#ff7fa6cf':'#888')}}
4）在build函数中调用，并控制页签换页：
build() {Tabs({barPosition:BarPosition.End}){TabContent(){Text('首页')}//.tabBar('首页').tabBar(this.MyTabBuilder(TabID.HOME))TabContent(){Text('动态')}//.tabBar('动态').tabBar(this.MyTabBuilder(TabID.COMMUNITY))TabContent(){Text('发布')}//.tabBar('发布').tabBar(this.MyTabBuilder(TabID.PUBLISH))TabContent(){Text('会员购')}//.tabBar('会员购').tabBar(this.MyTabBuilder(TabID.SHOPPING))TabContent(){Text('我的')}//.tabBar('我的').tabBar(this.MyTabBuilder(TabID.MINE))}.width('100%').height('100%').onChange((index)=>{this.pageIndex = index;//控制换页})}
预览效果：
首页：
动态：
发布：
会员购：
我的：
代码仓：
https://gitee.com/snowyvalley/harmony-app-dev-basic-course.git