鸿蒙软件开发实战案例（三）

董恩威

已于 2024-06-26 14:27:57 修改

阅读量137

点赞数 5

文章标签： harmonyos 华为

于 2024-06-26 13:52:21 首次发布

本文链接：https://blog.csdn.net/ycxdd/article/details/139985764

版权

本系列为黑马程序员HarmonyOS4+NEXT实战案例跟做记录，目录：

顶部搜索栏和统计卡片书写及其效果展示：

整体效果展示（.gif）：

相关实现代码：

顶部搜索框：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct SearchHeader {
  build() {
    Row({space:CommonConstants.SPACE_6}){
      Search({placeholder:'搜索饮食或运动信息'})//定义搜索组件。const搜索:SearchInterfac
        .textFont({size:18})
        .layoutWeight(1)
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:10}}){ //可以附加在单个组件上用于信息标记的容器组件。
        Image($r('app.media.ic_public_email'))
          .width(20)
      }

    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

卡片框架：

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CaloreStats from './calorieStats'
import DatePickDialog from './datepickdialog'
import NutrienStats from './nutrienStats'
@Component
export default  struct StatsCard {

  @StorageProp('selectedDate') selectedDate:number=DateUtil.beginTimeOfDay(new Date())//获取这一天的开始日期

  controller:CustomDialogController=new CustomDialogController({
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})//写回，以保证再次打开弹窗时仍是已选的日期，因datepickdialog中DatePickDialog为date类型所以需要转回
  })
  build() {
    Column(){
      //日期
      Row(){
        Text(DateUtil.formatDate(this.selectedDate))//用DateUtil.formatDate（）函数将selectedDate格式化为字符串的形式
          .fontColor($r('app.color.secondary_color'))
        Image($r('app.media.ic_public_spinner'))
          .width(20)
          .fillColor($r('app.color.secondary_color'))
      }
      .padding(CommonConstants.SPACE_12)
      .onClick(()=>{
        this.controller.open()
      })
      //统计
      Swiper(){
        //热量统计
        CaloreStats()
        //营养素统计
        NutrienStats()
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})//下面那个进度点的样式
    }
    .alignItems(HorizontalAlign.Start)//左对齐让日期选择停留在左侧以达到吻合效果图的效果
    .backgroundColor($r('app.color.stats_title_bgc'))
    .width(CommonConstants.THOUSANDTH_940)
    .borderRadius(CommonConstants.DEFAULT_18)//圆角
  }
}

日期弹窗：

class DateUtil{

  formatDate(num: number): string{
    let date = new Date(num)
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let day = date.getDate()
    let m = month < 10 ? '0' + month : month
    let d = day < 10 ? '0' + day : day
    return `${year}/${m}/${d}`
  }

  beginTimeOfDay(date: Date){
    let d = new Date(date.getFullYear(), date.getMonth(), date.getDate())
    return d.getTime()
  }
}

let dateUtil = new DateUtil()

export default dateUtil as DateUtil

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller:CustomDialogController
  selectedDate :Date =new Date()
  build() {
    Column({space:CommonConstants.SPACE_12}){
      //日期选择
      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)
        })
      //按钮
      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(()=>{
            //保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())//整个应用的内部存储,创建或保存selectedDate，selectedDate转换为毫秒的形式
            //关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

标签卡：

1、饮食摄入：

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller:CustomDialogController
  selectedDate :Date =new Date()
  build() {
    Column({space:CommonConstants.SPACE_12}){
      //日期选择
      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)
        })
      //按钮
      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(()=>{
            //保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())//整个应用的内部存储,创建或保存selectedDate，selectedDate转换为毫秒的形式
            //关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

2、营养摄入：

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller:CustomDialogController
  selectedDate :Date =new Date()
  build() {
    Column({space:CommonConstants.SPACE_12}){
      //日期选择
      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)
        })
      //按钮
      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(()=>{
            //保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())//整个应用的内部存储,创建或保存selectedDate，selectedDate转换为毫秒的形式
            //关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}