HarmonyOS鸿蒙Next中弹窗内倒计时刷新UI

HarmonyOS鸿蒙Next中弹窗内倒计时刷新UI

需要动态修改已发送的时间params.mSmsTime，应该如何实现，代码如下:

@Builder
function showDialog(params: showDialogParams) {
  Column() {
    Text('已发送（' + params.mSmsTime + '秒）')
      .fontSize(16)
      .width(250)
      .height(40)
      .textAlign(TextAlign.Center)
      .onClick(params.send)
  }
}

class showDialogParams {
  send?: () => void = () => {
  }
  mSmsTime: number =
    60 //获取短信验证码时间
}

let mDialog: ComponentContent<Object> | undefined = undefined;

@Entry
@Component
struct LoginPage {
  @State time: number = 60;

  build() {
    Column() {
      Button('click me').onClick(() => {
        if (this.dialogController != null) {
          let uiContext = this.getUIContext();
          let promptAction = uiContext.getPromptAction();
          let params: showDialogParams = {
            autoCancel: false, mSmsTime: this.time, send: () => {
              timer = setInterval(() => {
                this.time--;
                if (this.time == 0) {
                  this.time = 60;
                  clearInterval(timer)
                  return
                }
              }, 1000)
            }
          };
          mDialog = new ComponentContent(uiContext, wrapBuilder(showDialog), params)
          promptAction.openCustomDialog(mDialog) //显示弹窗
        }
      }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

更多关于HarmonyOS鸿蒙Next中弹窗内倒计时刷新UI的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

倒计时建议使用TextTimer组件，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-texttimer-V5

参考以下demo：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct TextTimerExample {
  private customDialogComponentId: number = 0
  private count: number = 5000
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'ss'
  @State message: string = '获取短信验证码'

  build() {
    Column() {
      Button(this.message)
        .onClick(() => {
          promptAction.openCustomDialog({
            builder: () => {
              this.customDialogComponent()
            }
          }).then((dialogId: number) => {
            this.customDialogComponentId = dialogId
          })
        })
    }
  }

  @Builder customDialogComponent() {
    Column() {
      TextTimer({ isCountDown: true, count: this.count, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
          if (elapsedTime == this.count/1000) {
            promptAction.closeCustomDialog(this.customDialogComponentId)
          }
        })
        .onAppear(() =>{
          this.textTimerController.start()
        })
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }
}

更多关于HarmonyOS鸿蒙Next中弹窗内倒计时刷新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry @ComponentV2 struct Index { private startTime: number = -1 private timeOut: number | undefined = undefined @Local text: string = ’ 发送’

build() { Column() { Text(this.text) .onClick(() => { if (this.startTime < 0) { this.startTime = Date.now() this.cycle() } }) }.size({ width: ‘100%’, height: ‘100%’ }) }

cycle() { let currentTime = Date.now() let duration = currentTime - this.startTime let leave = 60000 - duration if (leave < 500) { this.text = ‘发送’ this.startTime = -1 this.timeOut = undefined return } let nextTime = leave % 1000 if (nextTime == 0) { nextTime = 999 } // this.text = leave + ‘ms后’ leave = Math.round(leave / 1000) this.text = leave + ‘秒后再次发送’ this.timeOut = setTimeout(() => { this.cycle() }, nextTime) }

aboutToDisappear(): void { if (this.timeOut != undefined) { clearTimeout(this.timeOut) } } }

在HarmonyOS鸿蒙Next中，弹窗内倒计时刷新UI可以通过使用TaskDispatcher来管理异步任务，并结合Component的postTask方法来实现。首先，创建一个TaskDispatcher对象，用于调度倒计时任务。然后，使用postTask方法在UI线程中更新倒计时显示。具体步骤如下：

  1. 初始化倒计时：设置倒计时总时长，并启动一个异步任务进行倒计时。

  2. 更新UI：在异步任务中，每经过一定时间间隔（如1秒），使用postTask方法在UI线程中更新倒计时显示。

  3. 结束倒计时：当倒计时结束时，更新UI并执行相应的操作。

以下是一个简单的代码示例：

import taskpool from '@ohos.taskpool';
import { Component } from '@ohos.xyz';

class CountdownComponent extends Component {
  private countdown: number = 10; // 倒计时总时长
  private timerId: number | null = null;

  startCountdown() {
    this.timerId = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--;
        this.updateUI();
      } else {
        this.stopCountdown();
      }
    }, 1000);
  }

  updateUI() {
    taskpool.execute(() => {
      // 更新UI的操作
    }, taskpool.Priority.HIGH);
  }

  stopCountdown() {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
    // 倒计时结束后的操作
  }
}

在HarmonyOS鸿蒙Next中，弹窗内倒计时刷新UI可以通过以下步骤实现：

  1. 创建定时器：使用Timer或TimerTask来设置倒计时。
  2. 更新UI：在定时器的回调方法中，使用TaskDispatcher将UI更新操作分发到主线程。
  3. 刷新弹窗内容：在UI线程中，通过Component的invalidate方法或直接更新UI组件的属性来刷新弹窗内容。

示例代码：

Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
    int count = 10;
    @Override
    public void run() {
        if (count >= 0) {
            getUITaskDispatcher().asyncDispatch(() -> {
                // 更新UI组件
                textView.setText("倒计时: " + count);
            });
            count--;
        } else {
            timer.cancel();
        }
    }
}, 0, 1000);

确保在倒计时结束时取消定时器，避免资源浪费。

回到顶部