首页Tabs

一、首页UI设计

          1.Tabs组件可以实现页面内视图内容快速切换，包含TaBar和TabContent两个部分。

2.自定义Tabs的样式，需要用到Builder的函数，用Column布局，一个图片一串文字，需要自己传图片和文字的参数 

二、代码实现

// 定义一个组件，名为Index。
@Component
struct Index {

  // 使用@State装饰器定义一个状态变量currentIndex，初始化为0，用于跟踪当前选中的标签页索引。
  @State currentIndex:number = 0

  // 定义一个TabBarBuilder函数，用于构建标签栏的每个项目。
  // 它接受三个参数：标题资源title，图片资源image，和索引index。
  @Builder TabBarBuilder(title:Resource, image:ResourceStr, index:number) {
    // 使用Column函数创建一个垂直布局的项目。
    Column() {
      // 添加一个图片组件，使用传入的image参数，并设置宽度为22。
      // fillColor方法调用selectColor来选择颜色，根据currentIndex与index是否相等来决定颜色。
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      // 添加一个文本组件，显示传入的title参数，设置字体大小为14。
      // fontColor方法同样调用selectColor来选择颜色。
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  // selectColor是一个辅助函数，根据传入的索引index和当前currentIndex的值，
  // 返回应用在文本和图片上的颜色。如果索引匹配，则返回主题颜色，否则返回灰色。
  selectColor(index: number): Color {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  // build函数定义了组件的构建逻辑。
  build() {
    // 使用Tabs函数创建一个标签页组件，设置标签栏位置为BarPosition.End。
    Tabs({barPosition: BarPosition.End}) {
      // 为每个标签页内容TabContent创建一个文本组件，显示对应页面的名称。
      TabContent(){
        Text('饮食记录页面')
      }
      // 为第一个标签页设置TabBarBuilder创建的标签栏。
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))

      // 同上，为第二个和第三个标签页创建内容和标签栏。
      TabContent(){
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))

      TabContent(){
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))
    }

    // 设置组件的宽度和高度为'100%'，使其填满父容器。
    .width('100%')
    .height('100%')
    // onChange是一个事件处理函数，当标签页变化时调用，更新currentIndex为新的索引值。
    .onChange(index => this.currentIndex = index)
  }
}

三、运行结果