鸿蒙个人项目-首页Tabs

---

前言

欢迎来到我的鸿蒙个人项目首页！在这里，精心打造了一系列标签页（Tabs），希望能够提供一个直观、便捷的界面，以便用户能够快速浏览和访问项目中的关键信息和功能。随着项目的不断发展，我们将继续完善Tabs模块的功能和内容。

---

模块一Tabs组件：

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

Tabs({barPosition:BarPosition.End}){
      TabContent(){
      RecordIndex()
      }
      .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('我的主页')
      }

这段代码定义了一个 Tabs 组件，其中 barPosition 被设置为 BarPosition.End，表示标签栏的位置在底部。内部包含了三个 TabContent 部分：第一个 TabContent 中包含了 RecordIndex 组件，其对应的标签栏通过 TabBarBuilder 函数进行构建，标签文字为 $r('app.string.tab_record')，图标为 $r('app.media.ic_calendar')，索引为 0。第二个 TabContent 中只有文本 发现页面，其标签栏的文字为 $r('app.string.tab_discover')，图标为 $r('app.media.discover')，索引为 1。第三个 TabContent 中只有文本 我的主页，但没有关于其标签栏的更多详细配置。总的来说，这段代码定义了一个具有底部标签栏和三个不同内容页面的布局结构。 

二、TabBarBuilder 函数

TabBarBuilder 函数用于构建每个标签的栏内容，包括一个图片和一个文本，并通过 selectColor 函数根据当前选中状态设置颜色。在 build 方法中，使用 Tabs 组件创建了底部标签栏的布局。其中包含了三个标签内容，分别是 RecordIndex、发现页面 和 我的主页，每个标签都通过 TabBarBuilder 函数设置了对应的标题、图标和索引。、当标签切换时，通过 onChange 事件更新 currentIndex 的值。

代码如下：

@Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
  Column({space:CommonConstants.SPACE_8}){
    Image(image)
      .width(22)
      .fillColor(this.selectColor(index))
    Text(title)
      .fontSize(14)
      .fontColor(this.selectColor(index))
  }
}
selectColor(index:number){
    return this.currentIndex === index ? $r('app.color.primary_color'): $r('app.color.gray')
}

实现页面截图

代码示例

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/Recordindex'
@Entry
@Component
struct Index {
  @State currentIndex:number=0
@Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
  Column({space:CommonConstants.SPACE_8}){
    Image(image)
      .width(22)
      .fillColor(this.selectColor(index))
    Text(title)
      .fontSize(14)
      .fontColor(this.selectColor(index))
  }
}
selectColor(index:number){
    return this.currentIndex === index ? $r('app.color.primary_color'): $r('app.color.gray')
}

  build() {
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
      RecordIndex()
      }
      .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))

    }.width('100%')
    .height('100%')
    .onChange(index => this.currentIndex=index)
  }
}

---

总结

这段代码构建了一个自定义的索引结构 Index ，整体设计逻辑清晰，功能明确。通过使用状态变量 currentIndex 来跟踪当前选中的标签索引，实现了页面状态的动态管理。TabBarBuilder 函数的设计巧妙，它能够根据传入的参数生成统一风格的标签栏内容，包括图片和文本，并通过 selectColor 函数根据选中状态动态设置颜色，增强了用户交互的可视化效果。在 build 方法中，利用 Tabs 组件创建底部标签栏布局，清晰地定义了三个不同的标签内容及其对应的标签栏样式。通过 onChange 事件及时更新 currentIndex 的值，保证了状态的同步和页面的响应性。这段代码展示了一种良好的组件化和状态管理的编程模式，具有较高的可维护性和扩展性。它可以方便地应用于各种需要底部标签导航的应用场景。