问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在HarmonyOS NEXT开发中求一个60秒倒计时demo？

头像
春暖花开
    18.4k28216
    HarmonyOSharmonyos-next
    阅读 619
    avatarAI BotBETA
    以下是一个在HarmonyOS NEXT中实现60秒倒计时的简单Demo示例：

### 倒计时Demo示例

#### 1. 创建一个新的Ability（页面）

首先，在你的HarmonyOS项目中创建一个新的Ability，比如`CountdownAbility`。

#### 2. 在页面的布局文件中添加一个`Text`组件

在`resources/base/layout/ability_main.xml`中添加一个`Text`组件来显示倒计时时间：

    <DirectionalLayout

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:orientation="vertical"
ohos:alignment="center">

<Text
    ohos:id="$+id:countdown_text"
    ohos:width="wrap_content"
    ohos:height="wrap_content"
    ohos:text="60"
    ohos:text_size="30fp"
    ohos:text_color="#000000"/>

    </DirectionalLayout>

    
#### 3. 在页面的代码中实现倒计时逻辑

在`CountdownAbility.java`（或对应的Kotlin文件）中实现倒计时逻辑：

    package com.example.countdowndemo;

    import ohos.aafwk.ability.Ability;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.Component;
    import ohos.agp.components.Text;
    import ohos.bundle.IBundleManager;
    import ohos.multimodalinput.event.TouchEvent;
    import ohos.system.TimeUtils;

    public class CountdownAbility extends Ability {

    private Text countdownText;
private int countdownTime = 60; // 倒计时时间，单位为秒
private boolean isCountdownRunning = false; // 标记倒计时是否正在运行

@Override
protected void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);

    countdownText = (Text) findComponentById(ResourceTable.Id_countdown_text);

    // 开始倒计时
    startCountdown();
}

private void startCountdown() {
    if (!isCountdownRunning) {
        isCountdownRunning = true;
        new Thread(() -> {
            while (countdownTime > 0 && isCountdownRunning) {
                try {
                    Thread.sleep(1000); // 等待1秒
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                updateCountdownText();
                countdownTime--;
            }
            if (countdownTime <= 0) {
                countdownText.setText("时间到！");
            }
        }).start();
    }
}

private void updateCountdownText() {
    if (countdownText != null) {
        new Runnable() {
            @Override
            public void run() {
                countdownText.setText(String.valueOf(countdownTime));
            }
        }.runOnUiThread();
    }
}

@Override
protected void onStop() {
    super.onStop();
    isCountdownRunning = false; // 停止倒计时
}

// 其他生命周期方法可以根据需要实现

    }

    
#### 4. 配置Ability

在`config.json`中配置新创建的Ability：

    {
    "app": {

    "bundleName": "com.example.countdowndemo",
"applicationType": "normal",
"abilities": [
  {
    "name": "com.example.countdowndemo.CountdownAbility",
    "label": "CountdownDemo",
    "icon": "$media:icon",
    "description": "$string:mainability_description"
  }
]

    }
    }

    
#### 5. 运行项目

将项目编译并运行到HarmonyOS设备上，你应该会看到一个显示60秒倒计时的页面，每秒更新一次，直到倒计时结束。

这个示例展示了如何在HarmonyOS NEXT中实现一个简单的60秒倒计时功能。你可以根据需要进一步扩展和修改这个示例。
    1 个回答
    得票最新
    头像
    三掌柜
      37.1k430248
      ✓ 已被采纳

      参考代码：

      @Entry 
@Component 
struct TextTimerExample { 
  textTimerController: TextTimerController = new TextTimerController() 
  @State format: string = 'mm:ss' 
 
  build() { 
    Column() { 
      TextTimer({ isCountDown: true, count: 60000, 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) 
        }) 
      Row() { 
        Button("start").onClick(() => { 
          this.textTimerController.start() 
        }) 
        Button("pause").onClick(() => { 
          this.textTimerController.pause() 
        }) 
        Button("reset").onClick(() => { 
          this.textTimerController.reset() 
        }) 
      } 
    } 
  } 
}

      参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题