HarmonyOS鸿蒙Next中自定义弹框@CustomDialog中的@ComponentV2组件无法更新UI

HarmonyOS鸿蒙Next中自定义弹框@CustomDialog中的@ComponentV2组件无法更新UI 自定义弹框@CustomDialog中的@ComponentV2组件无法更新UI,对应代码如下

[@CustomDialog](/user/CustomDialog)
export struct RecordDialog {
controller: CustomDialogController

build() {
RelativeContainer() {
RecordView()
.id('iaImages')
.width('100%')
.height('100%')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End },
})

RecordText()
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End },
})
.width('100%')
.height('100%')
}
.width(250)
.height(150)
.backgroundColor($r('sys.color.mask_secondary'))
.borderRadius(18)
.padding(20)
}
}

[@ComponentV2](/user/ComponentV2)
export struct RecordText {
@Local duration: number = 0
@Local isCancel: boolean = false
intervalID?: number
onEventListener = (isCancel: boolean) => {
this.isCancel = isCancel
}

aboutToAppear(): void {
EventHubUtil.on('InputPanelEx_Cancel', this.onEventListener)
this.intervalID = setInterval(() => {
this.duration += 1
}, 1000)
}

aboutToDisappear(): void {
EventHubUtil.off('InputPanelEx_Cancel', this.onEventListener)
if (this.intervalID !== undefined) {
clearInterval(this.intervalID)
this.intervalID = undefined
}
}

build() {
RelativeContainer() {
Text(TimeUtil.number2time(this.duration))
.id('tvTime')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End },
})
.width('100%')
.textAlign(TextAlign.Center)
.fontSize(18)
.fontColor(Color.White)
Text(this.isCancel ? '松开手指 取消发送' : '手指上滑 取消发送')
.id('tvDesc')
.backgroundColor(this.isCancel ? Color.Red : Color.Transparent)
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End },
})
.width('100%')
.textAlign(TextAlign.Center)
.fontSize(16)
.fontColor(Color.White)
}
}
}

自组件定时更改数据都没法刷新UI


更多关于HarmonyOS鸿蒙Next中自定义弹框@CustomDialog中的@ComponentV2组件无法更新UI的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

因为咱们的代码中使用了独有的工具类,所以无法直接运行,我修改后发现弹窗弹出后自定义组件中的定时器读秒是会变化的,此下列代码的场景与咱们的场景相符吗?如不符合,可以提供下可复现问题的简单demo我们再进一步分析、处理下:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  dialogController: CustomDialogController = new CustomDialogController({
    builder: RecordDialog(),
  })
  build() {
    Column() {
      Button('onClick').onClick(() => {
        this.dialogController.open()
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@CustomDialog
export struct RecordDialog {
  controller: CustomDialogController = new CustomDialogController({ builder: RecordDialog({}) })
  build() {
    RelativeContainer() {
      RecordText()
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End },
        })
        .width('100%')
        .height('100%')
    }
    .width(250)
    .height(150)
    .backgroundColor($r('sys.color.mask_secondary'))
    .borderRadius(18)
    .padding(20)
  }
}

@ComponentV2
export struct RecordText {
  @Local duration: number = 0
  @Local isCancel: boolean = false
  intervalID?: number
  onEventListener = (isCancel: boolean) => {
    this.isCancel = isCancel
  }
  aboutToAppear(): void {
    this.intervalID = setInterval(() => {
      this.duration += 1
    }, 1000)
  }
  aboutToDisappear(): void {
    if (this.intervalID !== undefined) {
      clearInterval(this.intervalID)
      this.intervalID = undefined
    }
  }
  build() {
    RelativeContainer() {
      Text(this.duration.toString())
        .id('tvTime')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End },
        })
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontSize(18)
        .fontColor(Color.White)
      Text(this.isCancel ? '松开手指 取消发送' : '手指上滑 取消发送')
        .id('tvDesc')
        .backgroundColor(this.isCancel ? Color.Red : Color.Transparent)
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End },
        })
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontSize(16)
        .fontColor(Color.White)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中自定义弹框@CustomDialog中的@ComponentV2组件无法更新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,@CustomDialog中的@ComponentV2组件无法更新UI的原因可能与UI线程的同步机制有关。@ComponentV2组件的UI更新需要在主线程中执行,如果更新操作在非主线程中进行,可能导致UI无法及时刷新。

此外,@ComponentV2组件的生命周期管理也可能影响UI更新。如果组件在更新UI时处于不正确的生命周期状态(如onDestroyonInactive),更新操作将不会生效。

解决此问题,确保UI更新操作在主线程中执行,并检查组件的生命周期状态是否允许UI更新。

在HarmonyOS鸿蒙Next中,@CustomDialog中的@ComponentV2组件无法更新UI,可能是由于以下原因:

  1. 状态管理问题:确保使用了@State@Link等状态管理装饰器,并在状态变化时正确触发UI更新。

  2. 生命周期问题:检查组件的生命周期方法,确保在合适的时机更新UI。

  3. 异步操作问题:如果在异步操作中更新UI,确保在主线程中执行UI更新操作。

  4. 绑定问题:确认数据绑定是否正确,确保数据变化能够反映到UI上。

  5. 组件嵌套问题:检查组件嵌套关系,确保父组件的更新能够正确传递给子组件。

通过排查以上问题,可以有效解决@ComponentV2组件无法更新UI的情况。

回到顶部