黑马健康App（一）

系列文章目录

第一章 黑马健康APP
第二章 黑马健康APP
第三章 黑马健康APP
第四章 黑马健康APP
第五章 黑马健康APP

---

第一章 黑马健康APP

前言

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

---

一、欢迎页面

1.欢迎页

这个页面主要由一个垂直的Column容器组成，其中包含了一个水平居中的图片、一个Logo图片、一些水平排列的文本描述以及两个单独的文本行（一个用于解释“减更多”的含义，另一个用于显示ICP备案号）。
通过不同的样式和布局设置，这个界面可以呈现出清晰、有层次感的视觉效果。
代码如下：

Column({ space: 10 }) {
      // 1.中央Slogan
      Row() {
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)

      // 2.logo
      Image($r('app.media.home_logo')).width(150)
      // 3.文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('浙ICP备0000000号-36D')
        .opacityWhiteText(0.4)
        .margin({ bottom: 35 })

2.欢迎页弹窗组件

自定义了一个组件用于展示用户隐私协议，此处声明了一个弹窗控制器，在welcomePage页面使用他时进行初始化，如果用户同意则跳转到首页，不同意退出app
代码如下：

Column({space: CommonConstants.SPACE_10}){
      // 1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      // 2.内容
      Text($r('app.string.user_privacy_content'))
      // 3.按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(() => {
          this.confirm()
          this.controller.close()
        })
      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(() => {
          this.cancel()
          this.controller.close()
        })

---

二、饮食记录页

1.记录页面实现

该页面使用Tabs组件写了三个子页分别是记录页，发现页和我的页，该项目主要写记录页
代码如下：

build() {
    Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
      TabContent() {
      }
      .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)
    //设置在不同大小的设备上Tabs的方向
    .vertical(new BreakpointType({
      sm: false,
      md: true,
      lg: true
    }).getValue(this.currentBreakpoint))
  }

---

总结

以上就是今天要写的内容，本文仅仅简单介绍了该app的两个简单页，让我们期待后续的功能的开发