黑马健康（二）

最新推荐文章于 2025-05-18 18:53:37 发布

m0_67148886

最新推荐文章于 2025-05-18 18:53:37 发布

阅读量285

点赞数 7

文章标签： linux 前端数据库

本文链接：https://blog.csdn.net/m0_67148886/article/details/140025119

版权

介绍：

黑马健康App是一款功能全面的健康管理应用，黑马健康App通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。还提供个性化的推荐服务，确保用户能够获得最适合自己的健康和运动建议。总的来说，黑马健康App是一款功能全面、注重个性化推荐的健康管理应用，旨在为用户提供一站式的健康和运动解决方案

一、结构分析

在这个应用中，我们采用了 Tabs 组件来实现多标签页的布局。Tabs 组件内包含了 TabBar，用于展示不同的标签选项，以及与之对应的 TabContent组件，用于展示每个标签页的具体内容。

对于黑马健康app，我们需要用到三个标签页，因此我们在 TabBar 中添加了三个标签选项，并在 Tabs 组件内部添加了三个对应的 TabContent 组件。这样，用户就可以通过点击 TabBar 中的不同标签，来切换并查看不同的 TabContent，从而在不同界面之间自由切换。

同时，每个界面的标签栏都有自己的样式所以需要用@builder组件更改 TabBar的样式

`二、首页代码`

import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct Index {
  @State ColorIndex: number = 0

  @Builder tabBar(title: string, image: ResourceStr, index: number) {
    Column({ space: 5 }) {
      Image(image)
        .width(22)
        .fillColor(this.tabBerColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.tabBerColor(index))
    }
  }

  tabBerColor(index: number) {
    return this.ColorIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
       // RecordIndex()
      }.tabBar(this.tabBar('记录', $r('app.media.ic_calendar'), 0))

      TabContent() {
        Text('121')
      }.tabBar(this.tabBar('交流', $r('app.media.discover'), 1))

      TabContent() {
        Text('333')
      }.tabBar(this.tabBar('个人', $r('app.media.ic_user_portrait'), 2))
    }
    .backgroundColor($r('app.color.index_page_background'))
    .onChange(index => {
      this.ColorIndex = index
    })
  }
}