黑马健康-首页的设计

 

---

一，前言

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

二.应用界面UI

代码：

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

三、运行出来的截图如下：

四、结果及总结

这段代码描述了一个鸿蒙（HarmonyOS）应用中的Index组件，该组件作为应用的主界面或首页，具有响应式设计和底部导航栏功能。以下是该组件的功能及设计的更具体解释：

功能与设计
入口组件：通过@Entry和@Component装饰器，标记该组件为应用的入口点，意味着它是应用启动时首先展示的组件。
状态管理：
currentIndex：用于追踪当前选中的底部导航栏索引。
isPageShow：控制特定页面（如“记录”页面）的显示或隐藏状态。
断点处理与响应式设计：
使用BreakpointSystem实例监听屏幕尺寸变化，实现响应式设计。
currentBreakpoint属性用于存储当前设备的断点类型（如手机、平板等）。
根据断点类型动态调整布局，如底部导航栏的位置和是否垂直显示。
底部导航栏：
TabBarBuilder方法用于构建底部导航栏的各个选项，包括标题、图标和索引。
导航选项的颜色根据当前是否选中进行动态调整。
页面切换：
使用Tabs组件实现底部导航功能。
TabContent组件包裹具体的页面内容，与底部导航栏的按钮相关联。
当用户点击不同的导航选项时，更新currentIndex的值，并显示相应的页面内容。
页面内容：
实现了三个页面标签：“记录”、“发现”和“我的主页”。
“记录”页面使用了RecordIndex组件，并根据isPageShow状态控制其显示或隐藏。
模块化与可维护性
代码采用了模块化的设计思路，将不同的功能划分为不同的组件和方法，提高了代码的可维护性和可重用性。
引入了外部模块和常量，如断点类型定义、断点常量、通用常量等，使代码更加清晰和易于管理。
总结
这段代码展示了鸿蒙应用中一个功能丰富、设计灵活的首页组件。它通过响应式设计适应了不同屏幕尺寸的设备，利用底部导航栏实现了页面间的切换，同时结合了状态管理和模块化的设计思路，提高了应用的可用性和可维护性。