鸿蒙OS应用开发之每日一坑（管理组件状态代码学习）

背景

        华为官方视频教程<HarmonyOS第一课>构建更加丰富的页面-华为开发者学堂 (huawei.com)

管理组件状态视频看完后，仍然有一些疑惑，所以追了一下源码出来供同样疑惑的人参考，如有错误，请大佬指正

页面效果

组件之间的状态管理的装饰器，@State、@Prop、@Link、@Watch官方给了很详细的视频教程，大家可以去观看，我主要解释一下官方没说到完了自己又看不懂的地方

疑问点

一.弹窗组件的应用

1.创建弹窗构造器

// 创建构造器，与装饰器呼应相连
dialogController: CustomDialogController = new CustomDialogController({ //创建弹窗构造器实例
    builder: AddTargetDialog({
      onClickOk: (value: string): void => this.saveTask(value)
    }),    //自定义弹窗内容构造器，指向@CustomDialog装饰器构建的build
    alignment: DialogAlignment.Bottom,    //弹窗出现在页面底部
    offset: {                               //相对alignment的偏移
      dx: CommonConstants.DIALOG_OFFSET_X,
      dy: $r('app.float.dialog_offset_y')
    },
    customStyle: true,    //true表示自定义弹窗样式
    autoCancel: false    //不允许点击弹窗外区域退出弹窗
  });

2.使用@CustomDialog装饰器装饰弹窗的自定义组件

3.弹窗的打开和关闭开关

源码的弹窗开关位置一共就三处，点击‘添加子目标’，以及弹窗内的取消和确定按钮

对应代码位置如下

二.@Extend装饰器

源码多处使用了@Extend装饰器，但官方视频没有过多介绍
官方介绍文档：@Extend装饰器：定义扩展组件样式

简单说，@Extend装饰器就是避免代码冗长重复，可以封装一些属性配置作为公共属性，类似与C语言的宏定义可以原样替换，提高代码的可读性，它定义在全局，而且支持封装组件的私有属性和私有事件

使用方法参考官方文档

三.源码的数据处理过程

数据结构体

export class TaskItemBean {

  taskName: string;    //目标名
  updateDate: string;    //目标进度更新时间
  progressValue: number;    //目标进度，百分比

  constructor(taskName: string, progressValue: number, updateDate: string) {
    this.taskName = taskName;
    this.progressValue = progressValue;
    this.updateDate = updateDate;
  }
}

定义数据操作的类

export class DataModel {
    //数据存储的变量
  private targetData: Array<TaskItemBean> = [];
// 读取数据
  getData(): Array<TaskItemBean> {
    return this.targetData;
  }

//删除数据，入参时布尔型的数组，要删掉的数据位传true
  deleteData(selectArr: Array<boolean>) {
    if (!selectArr) {
      Logger.error(TAG, 'Failed to delete data because selectArr is ' + selectArr);
    }
    //length转化为index，长度-1
    let dataLen = this.targetData.length - CommonConstants.ONE_TASK;
    for (let i = dataLen; i >= 0; i--) {
      if (selectArr[i]) {
        this.targetData.splice(i, CommonConstants.ONE_TASK);    //删除数据
      }
    }
  }
// 添加数据
  addData(data: TaskItemBean) {
    if (!data) {
      Logger.error(TAG, 'addData error because data is: ' + data);
      return;
    }
    this.targetData.push(data);
  }

//获取最后一组数据的进展百分比
  getLatestProgressValue(): number {
    if (this.targetData.length === 0) {
      return 0;
    }
    return this.targetData[this.targetData.length - CommonConstants.ONE_TASK].progressValue;
  }
//更新数据
  updateProgress(index: number, updateValue: number, updateDate: string): boolean {
    if (!this.targetData[index]) {
      return false;
    }
    this.targetData[index].progressValue = updateValue;
    this.targetData[index].updateDate = updateDate;
    return true;
  }
}

四.数据的使用<->对比UI操作

表头数据更新

1.寻找需要更新的数据

表头有三个数据需要更新，更新时间、目标总数、目标完成数

2.排查数据更新的点，在什么操作下会更新数据（添加子目标后，已有目标更新进度后，删除子目标）

3.代码实现过程

使用@Watch监控变量overAllProgressChanged表示页面有更新，由于以上三个会触发数据更新的组件关系属于跨组件层级，因此再使用@Provide和@Consume装饰器装饰变量overAllProgressChanged

祖先组件使用@Provide装饰器装饰变量overAllProgressChanged

回调函数的内容，更新数据

变量刷新位置

子孙组件使用@Consume装饰器装饰变量overAllProgressChanged

子孙数据更新位置

子目标数据更新

1.寻找需要更新的数据

子目标有两个数据需要更新，更新时间、目标完成度(百分比)

2.排查数据更新的点，在什么操作下会更新数据（拖动进度条到合适位置后点击确定，刷新数据）

3.代码实现过程

源码中使用了匿名函数封装点击事件

ProgressEditPanel({
            slidingProgress: this.latestProgress,
            onCancel: () => this.isExpanded = false,
            onClickOK: (progress: number): void => {
              this.latestProgress = progress;
              this.updateDate = getCurrentTime();
              let result = DataModel.updateProgress(this.index, this.latestProgress, this.updateDate);
              if (result) {
                this.overAllProgressChanged = !this.overAllProgressChanged;
              }
              this.isExpanded = false;
            },
            sliderMode: $sliderMode
          })

最后

        在调试过程中发现文本输入框不能输入汉字，如果大佬们有解决方案请在评论区狠狠踢我，多谢