Harmony鸿蒙实战开发-健康管理app-健康中心「UI界面/登录-注册-修改密码-运动记录」【源码在文末】


运行工具:DevEco Studio

一、运行演示

1、登录

image-20240721142014451

2、注册

image-20240721142029504

3、忘记密码

image-20240721142042905

4、首页【UI界面】「可上下滑动浏览-带头部导航栏」

5、健康【UI界面】

image-20240721142235392

6、运动「实时记录」

image-20240721142311371

7、身体【UI界面】「可上下滑动」

image-20240721142339958

8、我的-首页「各个模块可点击」

image-20240721142446137

9、我的-运动手环【UI界面】

image-20240721142511565

10、我的-个人信息

image-20240721142544047

11、我的-反馈中心

image-20240721142647338

12、我的-关于我们

image-20240721142722996

二、部分代码

import router from '@ohos.router'
@Preview
@Component
export default struct Mine {

  build() {
    Column() {
      Row(){
        Column(){
          Text('用户10001')
            .fontSize(22)
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
            .margin({
              left:20
            })
          Text('与健康中心相遇的第33天')
            .fontSize(12)
            .fontColor(Color.White)
            .margin({
              top:5,
              left:20
            })
        }
        .alignItems(HorizontalAlign.Start)
        Image($r('app.media.ic_avatar'))
          .width(50)
          .height(50)
          .margin({
            right:20
          })
      }.justifyContent(FlexAlign.SpaceBetween)
      .margin({
        top:20
      })
      .width('100%')
      .height('10%')

      Image($r('app.media.plus')).width('100%')
        .height(100)
        .margin({
          top:20,
          left:20,
          right:20
        })
        .objectFit(ImageFit.Fill)

      Column(){
        Row(){
          Row(){
            Image($r('app.media.ic_band')).width(25).height(25).objectFit(ImageFit.Fill)
            Text('运动手环').fontColor(Color.White).margin({
              left:10
            })
          }
          .margin({
            left: 20,
            top:20
          })
          Image($r('app.media.ic_right')).width(25).height(25).objectFit(ImageFit.Fill).margin({
            right: 20,
            top: 20
          })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/settings/band'
          })
        })
        Row(){
          Row(){
            Image($r('app.media.ic_info')).width(25).height(25).objectFit(ImageFit.Fill)
            Text('个人信息').fontColor(Color.White).margin({
              left:10
            })
          }

          .margin({
            left: 20,
            top:30
          })
          Image($r('app.media.ic_right')).width(25).height(25).objectFit(ImageFit.Fill).margin({
            right: 20,
            top: 30
          })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/settings/myInfo'
          })
        })
        Row(){
          Row(){
            Image($r('app.media.ic_help')).width(25).height(25).objectFit(ImageFit.Fill)
            Text('我要帮助').fontColor(Color.White).margin({
              left:10
            })
          }
          .margin({
            left: 20,
            top:30
          })
          Image($r('app.media.ic_right')).width(25).height(25).objectFit(ImageFit.Fill).margin({
            right: 20,
            top: 30
          })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/settings/help'
          })
        })
        Row(){
          Row(){
            Image($r('app.media.ic_about')).width(25).height(25).objectFit(ImageFit.Fill)
            Text('关于我们').fontColor(Color.White).margin({
              left:10
            })
          }
          .margin({
            left: 20,
            top:30
          })
          Image($r('app.media.ic_right')).width(25).height(25).objectFit(ImageFit.Fill).margin({
            right: 20,
            top: 30
          })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)
        .onClick(() => {
          router.pushUrl({
            url: 'pages/settings/about'
          })
        })
      }.backgroundColor('#1F1F1F')
      .width('95%')
      .height('30%')
      .margin({
        left:20,
        right:20,
        top:20
      })
      .borderRadius(15)
    }.width('100%')
    .height('100%')
    .backgroundImage($r('app.media.background'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

三、源码

相关鸿蒙项目点此专栏

image-20241020235757199

通过百度网盘分享的文件:…zip 链接:百度网盘 请输入提取码

文件已经加密,请点击下方名片获取源码

或:Lvnvn0508

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐