鸿蒙任务列表与秒表集合软件开发（一）

首页部分功能实现代码解析

// 定义一个构建 Tab 项内容的方法，接收标题、图标和索引作为参数
  @Builder TabBuilder(title: string, image: ResourceStr, index: number) {
    Column({ space: 4 }) {
      // 根据当前索引是否为选中状态，设置图标的颜色
      Image(image).fillColor(this.currentIndex === index ? Color.Green : Color.Gray)
        .width(20)
      // 根据当前索引是否为选中状态，设置文本的颜色
      Text(title).fontColor(this.currentIndex === index ? Color.Green : Color.Gray)
        .fontSize(14)
    }
    .justifyContent(FlexAlign.Center) // 设置内容居中对齐
  }

        用来创建一个带有图标和文本的标签，并且根据当前选中的索引动态地改变图标和文本的颜色，从而实现标签选中状态的视觉反馈效果。

1. 参数说明:

   • title: 标签的文本标题。
   • image: 标签的图标资源。
   • index: 当前标签的索引值，用于与选中的索引进行比较。

2. 结构布局:

   • 外层使用了一个Column组件，其内部包含一个Image组件和一个Text组件，并且组件之间有4个单位的间隔（space: 4）。
   • Column组件将其内容垂直排列。

3. 动态样式:

   • Image组件：图标的颜色根据this.currentIndex === index进行判断。如果当前索引等于传入的索引，则图标颜色为绿色（Color.Green），否则为灰色（Color.Gray）。同时，设置图标的宽度为20个单位。
   • Text组件：文本的颜色同样根据this.currentIndex === index进行判断，选中时为绿色，不选中时为灰色。文本的字体大小设置为14个单位。

4. 对齐方式:

   • 使用.justifyContent(FlexAlign.Center)将Column内的内容在主轴方向（垂直方向）上居中对齐。

// 构建组件的界面
  build() {
    // 使用 Tabs 组件创建标签页，并将标签栏位置设置在底部
    Tabs({ barPosition: BarPosition.End }) {
      // 第一个标签页内容
      TabContent() {
        Column() {
          // 显示 TaskPage 组件
          TaskPage()
        }
      }
      // 设置第一个标签页的标签栏内容
      .tabBar(this.TabBuilder('记录', $r('app.media.ic_calendar'), 0))

      // 第二个标签页内容
      TabContent() {
        // 显示 StopWatch 组件
        StopWatch()
      }
      // 设置第二个标签页的标签栏内容
      .tabBar(this.TabBuilder('秒表', $r('app.media.ic_walk'), 1))

      // 第三个标签页内容
      TabContent() {
        MyPage()
      }
      // 设置第三个标签页的标签栏内容
      .tabBar(this.TabBuilder('我的', $r('app.media.ic_user_portrait'), 2))
    }
    .width('100%')       // 设置 Tabs 组件宽度为 100%
    .height('100%')      // 设置 Tabs 组件高度为 100%
    .vertical(false)     // 设置标签栏水平布局
    .onChange(index => this.currentIndex = index) // 当标签页切换时，更新当前选中的索引
  }

        主要构建了一个界面，其中包含三个标签页，每个标签页都有自己的内容和图标。通过使用 Tabs 组件和 TabBuilder 方法，实现了动态设置标签栏的文本、图标和选中状态的反馈。用户可以通过点击标签页来切换不同的内容展示，同时标签栏的布局和样式也得到了精心的控制和设计。

1. Tabs 组件:

   • 使用 Tabs({ barPosition: BarPosition.End }) 创建一个标签页组件，将标签栏位置设置在底部（barPosition: BarPosition.End）。

2. 第一个标签页:

   • 使用 TabContent() 创建第一个标签页的内容。

   • 内容是一个 Column 组件，包含一个 TaskPage 组件，用于显示任务页面内容。

   • 标签栏内容由 .tabBar(this.TabBuilder('记录', $r('app.media.ic_calendar'), 0)) 设置。这里调用了 this.TabBuilder 方法，传入标签标题 "记录"，图标资源 $r('app.media.ic_calendar') 和索引 0。

3. 第二个标签页:

   • 使用 TabContent() 创建第二个标签页的内容。

   • 内容是一个 StopWatch 组件，用于显示秒表功能。

   • 标签栏内容由 .tabBar(this.TabBuilder('秒表', $r('app.media.ic_walk'), 1)) 设置。同样调用 this.TabBuilder 方法，传入标签标题 "秒表"，图标资源 $r('app.media.ic_walk') 和索引 1。

4. 第三个标签页:

   • 使用 TabContent() 创建第三个标签页的内容。

   • 内容是一个简单的 Text 组件，显示 "我的页面"。

   • 标签栏内容由 .tabBar(this.TabBuilder('我的', $r('app.media.ic_user_portrait'), 2)) 设置。再次调用 this.TabBuilder 方法，传入标签标题 "我的"，图标资源 $r('app.media.ic_user_portrait') 和索引 2。

5. Tabs 组件属性:

   • .width('100%') 和 .height('100%') 设置 Tabs 组件的宽度和高度为100%，使其充满父容器。
   • .vertical(false) 设置标签栏水平布局，确保标签在水平方向排列。
   • .onChange(index => this.currentIndex = index) 当标签页切换时，更新当前选中的索引 this.currentIndex。