鸿蒙实战案例-欢迎页面UI实现及首页Tabs

前言

       欢迎来到我的鸿蒙移动开发项目！我将致力于使用鸿蒙操作系统打造出色的移动应用。让我们一起开启创新的旅程！现在我们将做一个关于健康的软件，本次带来的是首页Tabs！

---

一、设计与布局

界面设计

        这是我们这次要做的首页UI设计，这次我们用到了Tabs组件，Tabs组件可以实现页面内视图内容快速切换，包含TabBar和TabContent两个部分。

        本次我们做首页的一个布局

这个是我们首页的一个布局效果：

二、步骤

1.第一步，我们首先找到index页面，将其进行进一步开发

2.找到页面后我们开始敲击代码，最终展示为：

三、相关代码

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(25)
      Text(title)
        .fontSize(14)
    }
  }

  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%')
  }
}

---

总结

        这次我们创建了一个包含三个选项卡的界面。每个选项卡中都有一个标签栏，分别显示了"记录"、"发现页面"和"我的主页"的内容。整体上，这段代码实现了一个具有选项卡功能的界面，其中包含三个不同的页面。