当前位置：首页 > web >正文

使用tabs组件搭建UI框架

web 2025/7/13 10:25:18

本节任务

使用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;//控制换页})}

预览效果：

首页：

在这里插入图片描述