黑马健康app（二）

最新推荐文章于 2024-06-25 22:56:16 发布

月亮在等谁.ᥫᩣ

最新推荐文章于 2024-06-25 22:56:16 发布

阅读量184

点赞数 7

文章标签：鸿蒙

本文链接：https://blog.csdn.net/weixin_73039670/article/details/139960790

版权

系列文章目录

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

第二章黑马健康APP

前言

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

一、头部搜索栏

在这里插入图片描述

这个栏目是由一个Row容器包裹了两部分内容分别是Search和image，其中image组件被包裹在Badge组件中，该组件用于显示图片右上方的数字小标
代码如下：

Badge({count: 1, position: BadgePosition.RightTop, style: {fontSize: 12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }

二.统计卡片

该组件中主要定义了两大部分内容分别是日期信息和统计信息

1.日期信息

这里定义了一个外部弹窗组件，将日期选择器定义为一个弹窗，通过controller声明一个弹窗对象并进行初始化

controller: CustomDialogController = new CustomDialogController({
    builder: DatePickDialog({selectedDate: new Date(this.selectedDate)})

弹窗内部两大部分，其中日期选择器使用ArkTs自带组件DataPicker。
按钮部分通过日期的选择进行确定和取消如果确定选择该日期，则会将该日期保存到全局存储以方便后面其他组件使用，否则取消的话就会关闭弹窗

// 1.日期选择器
      DatePicker({
        start: new Date('2020-01-01'),
        end: new Date(),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
        })
      // 2.按钮
      Row({space:CommonConstants.SPACE_12}){
        Button('取消')
          .width(120)
          .backgroundColor($r('app.color.light_gray'))
          .onClick(() => this.controller.close())
        Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))
          .onClick(() => {
            // 1.保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())
            // 2.关闭窗口
            this.controller.close()
          })
      }