黑马健康——首页UI设计

 一，前言

        综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

二.应用界面UI

（1）页面UI分析

（2）代码

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM

  @State isPageShow: boolean = false

  onPageShow(){
    this.isPageShow = true
  }
  onPageHide(){
    this.isPageShow = false
  }

  @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))
    }
  }

  aboutToAppear(){
    this.breakpointSystem.register()
  }

  aboutToDisappear(){
    this.breakpointSystem.unregister()
  }

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

  build() {
    Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
      TabContent() {
        RecordIndex({isPageShow: this.isPageShow})
      }
      .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)
    .vertical(new BreakpointType({
      sm: false,
      md: true,
      lg: true
    }).getValue(this.currentBreakpoint))
  }
}

（3）运行效果截图

三.总结

这段代码定义了一个名为`Index`的组件，它似乎是一个应用程序的主界面或者说是首页，包含了底部导航栏以及与之关联的多个页面内容（记录、发现、我的主页）。组件利用响应式设计，能够根据不同的屏幕断点（例如手机和平板的不同尺寸）调整布局。下面是代码的关键部分解析：

    导入相关模块 ：从项目中的common目录导入了断点类型定义、断点常量、通用常量、断点系统工具类，以及具体的页面组件`RecordIndex`。

    组件定义 ：使用`@Entry`和`@Component`装饰器标记该组件为应用的入口组件。组件内部包含了状态管理（如当前选中索引`currentIndex`、页面显示状态`isPageShow`）、存储属性（当前断点类型`currentBreakpoint`），以及一些生命周期方法（如页面显示/隐藏时的处理）。

    底部导航栏构建器方法 ：定义了一个`TabBarBuilder`方法，用于动态生成底部导航栏的每个选项。它接收标题、图标资源和索引作为参数，并根据当前是否选中来决定文字和图标的颜色。

    响应式布局处理 ：通过`BreakpointSystem`实例注册和注销监听器来响应屏幕尺寸变化，以自动调整布局。同时，在`build`方法中利用`BreakpointConstants`来动态设定底部导航栏的位置，以及通过`BreakpointType`来控制在不同屏幕尺寸下的垂直显示与否。

页面切换逻辑：使用`Tabs`组件构建底部导航，并通过`TabContent`包裹具体页面内容。每个`TabContent`都关联了一个由`TabBarBuilder`构建的底部导航按钮，且当导航选项改变时会更新`currentIndex`的值。

  页面内容：目前实现了三个页面标签：“记录”（使用`RecordIndex`组件，并传入页面显示状态），“发现”，和“我的主页”。其中，“记录”页面的显示隐藏逻辑依赖于`isPageShow`状态。

综上所述，这段代码展示了如何在鸿蒙应用中创建一个具备基本导航结构和响应式设计的首页组件，同时融入了状态管理、资源引用、以及模块化的设计思路。