使用tabs组件搭建UI框架-EW帮帮网

本节任务

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

  }

预览效果：

首页：

在这里插入图片描述