HarmonyOS 鸿蒙Next 关于Progress组件的value双向绑定问题

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 关于Progress组件的value双向绑定问题 在Progress组件示例里,value是用@state声明的
@State value: number = 0

如果要在工具类里调用Progress组件,怎么创建双向绑定的value?

class ProgressDialogParams {
  title: string = "";
  text: string = "";
  value: number = 0;
  cancel: Function;
  constructor(title: string, text: string, value: number, cancel: Function) {
    this.title = title;
    this.text = text;
    this.value = value;
    this.cancel = cancel;
  }
}

@Builder
function buildProgress(params: ProgressDialogParams) {
  Column() {
    Column() {
      Text(params.title)
        .width('100%')
        .padding(10)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(params.text)
        .width('100%')
        .fontSize(16)
        .padding(10)
      Row() {
        Progress({value: params.value, total: 100, type:ProgressType.Linear})
          .style({strokeWidth: 20, enableSmoothEffect: true})
      }
      .margin({ bottom: 10 })
      Row() {
        Button("取消", {
          type: ButtonType.Normal,
          buttonStyle: ButtonStyleMode.NORMAL
        }).onClick(() => {
          params.cancel();
        })
      }
    }
    .width('90%')
    .borderRadius(borderRadiuses(20))
    .backgroundColor('#FFF0F0F0')
    .padding({
      top: 20,
      bottom: 20,
      left: 10,
      right: 10
    })
  }
  .height('100%')
  .justifyContent(FlexAlign.Center)
}

export class ProgressDialogFactory {
  windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  uiContext = this.windowStage.getMainWindowSync().getUIContext();
  pa = this.uiContext.getPromptAction();
  contentNode: ComponentContent<Params> | null = null;
  openDialog(title: string, text: string, value: number) {
    let cancel = () => {
      this.closeDialog();
    }
    try {
      this.contentNode =
        new ComponentContent(this.uiContext, wrapBuilder(buildProgress), new ProgressDialogParams(title, text, value, cancel));
      this.pa.openCustomDialog(this.contentNode, {
        autoCancel: false
      });
    } catch (error) {
      let message = (error as BusinessError).message;
      let code = (error as BusinessError).code;
      console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
    }
  }
  closeDialog() {
    this.pa.closeCustomDialog(this.contentNode);
  }
}

export const downloadFile = (url: string, path: string = 'DOWNLOAD') => {
  let context = getContext() as common.UIAbilityContext;
  let filePath = `${context.filesDir}/${path}`;
  let value = 0; // 此处声明value
  const controller: ProgressDialogFactory = new ProgressDialogFactory();
  controller.openDialog('版本更新', '下载中,请稍候...', value);
  request.downloadFile(context, {
    url,
    filePath
  }, (err: BusinessError, downloadTask: request.DownloadTask) => {
    if (err) {
      console.error(JSON.stringify(err))
      return;
    }
    downloadTask.on('progress', (size: number, total: number) => {
      value = Math.ceil(size / total) * 100; // 此处value改变不会影响Progress进度
    })
    downloadTask.on('complete', async () => {
      console.log(JSON.stringify(result));
      controller.closeDialog();
    })
  })
}

更多关于HarmonyOS 鸿蒙Next 关于Progress组件的value双向绑定问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

老铁,鸿蒙中类的每次实例化跟上一次都没关系,每一次实例化的value都是0,所以数据无法与工具类中属性建立双向绑定的

关于数据双向绑定的官方方案,你看下这个文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-link-V13

更多关于HarmonyOS 鸿蒙Next 关于Progress组件的value双向绑定问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,关于Progress组件的value双向绑定问题,通常涉及到数据模型(ViewModel或Data Binding)与UI组件之间的同步更新。在鸿蒙开发中,虽然不直接使用Java或C语言,但理解数据绑定的基本原理对于解决问题至关重要。

Progress组件的value属性用于表示进度条的当前进度。要实现value的双向绑定,需要确保数据模型中的进度值与Progress组件的value属性保持同步。这通常通过数据绑定框架自动完成,开发者只需正确设置绑定关系。

若遇到value双向绑定不工作的情况,请检查以下几点:

  1. 确保数据模型中的进度值已被正确初始化,并且是可观察的(即当值改变时,能够通知UI组件)。
  2. 检查XML布局文件中Progress组件的value属性是否已正确绑定到数据模型中的进度值。
  3. 确认在代码中更新进度值时,是通过数据模型进行的,而不是直接操作UI组件。
  4. 如果使用了MVVM架构,检查ViewModel和View之间的绑定是否已正确建立。

如果以上步骤均无误,但问题依旧存在,可能是系统或框架的bug。此时,建议查阅最新的鸿蒙开发文档或社区论坛,看是否有其他开发者遇到并解决了相同的问题。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部