免费网站建设软件推荐_企业网络规划开题报告_seo关键词布局案例_肇庆seo优化

本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间，启动倒计时后，应用会动态显示一个随着时间递减的环形进度条，同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。

---

关键词

• UI互动应用
• 倒计时器
• 环形进度条
• 动画效果
• 状态管理

---

一、功能说明

倒计时环形进度条允许用户设置一个初始倒计时时间，并以环形进度条和数字的方式动态显示剩余时间。倒计时结束时，环形进度条归零并显示“时间到”提示。

---

二、所需组件

• @Entry 和 @Component 装饰器
• Canvas 组件用于绘制环形进度条
• TextInput 组件用于用户输入倒计时时间
• Text 组件用于显示倒计时剩余时间
• Button 组件用于控制倒计时
• 定时器函数 setInterval 和 clearInterval 用于时间管理
• @State 修饰符用于状态管理

---

三、项目结构

• 项目名称：CountdownRingApp
• 自定义组件名称：CountdownRingPage
• 代码文件：CountdownRingPage.ets、Index.ets

---

四、代码实现

@Entry
@Component
export struct CountdownProgress {@State remainingTime: number = 10; // 剩余时间（默认10秒）@State totalTime: number = 10; // 总时间（倒计时时间）@State isRunning: boolean = false; // 是否正在倒计时private intervalId: number | null = null; // 定时器IDbuild() {Column({ space: 20 }) { // 创建垂直布局容器// 设置倒计时的时间滑动条Text('设置倒计时时间（秒）').fontSize(18).fontWeight(FontWeight.Medium).textAlign(TextAlign.Center);// 滑动条，调整倒计时时间Slider({value: this.remainingTime,min: 0,max: 60,}).blockColor(Color.Blue) // 设置滑块颜色.trackColor(Color.Gray) // 设置轨道颜色.onChange((newValue) => {this.remainingTime = newValue;this.totalTime = newValue; // 更新总时间}).width('80%').margin({ top: 10 });// 显示倒计时的剩余时间Text(`${this.remainingTime}秒`).fontSize(24).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).margin({ top: 20 });// 环形进度条显示倒计时进度Progress({value: (this.remainingTime / this.totalTime) * 100, // 设置进度total: 100, // 最大进度为100type: ProgressType.Ring, // 使用环形进度条}).color(Color.Green).backgroundColor(Color.Gray).width(200).height(200).margin({ top: 20 });// 开始或停止倒计时按钮Button(this.isRunning ? '停止倒计时' : '开始倒计时').onClick(() => {if (this.isRunning) {this.stopCountdown();} else {this.startCountdown();}}).fontSize(20).backgroundColor(this.isRunning ? Color.Red : Color.Green).fontColor(Color.White).width('60%').alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 开始倒计时的方法private startCountdown() {this.isRunning = true;this.intervalId = setInterval(() => {if (this.remainingTime > 0) {this.remainingTime--;} else {this.stopCountdown();this.showTimeUp();}}, 1000); // 每秒更新一次}// 停止倒计时的方法private stopCountdown() {this.isRunning = false;if (this.intervalId !== null) {clearInterval(this.intervalId);this.intervalId = null;}}// 显示倒计时结束信息private showTimeUp() {// 可以添加一个提示框来显示倒计时结束console.log("时间到！"); // 这里是控制台输出，实际可以使用弹窗或者其他UI组件}
}

// 文件名：Index.etsimport { CountdownProgress } from './CountdownProgress';@Entry
@Component
struct Index {build() {Column() {CountdownProgress() // 调用倒计时进度条组件}.padding(20)}
}

效果示例：用户设置倒计时时间后，启动倒计时环形进度条逐渐递减，伴随数字显示时间的变化。当时间归零时，环形进度条完全消失。

---

五、代码解读

• Canvas 动态绘图：使用 Canvas 绘制圆形背景和环形进度条，通过实时更新进度条角度实现动态效果。
• 倒计时逻辑：使用 setInterval 定时减少 timeLeft，实现倒计时功能。
• 状态管理：通过 @State 实时更新倒计时状态，并联动更新画布内容。

---

六、优化建议

1. 颜色渐变：为进度条添加动态颜色变化效果，提高视觉效果。
2. 音效提醒：倒计时结束时播放提示音，增强用户体验。
3. 动态文本显示：在环形进度条内实时显示剩余时间，减少用户视线移动。

---

七、相关知识点

• 「Mac畅玩鸿蒙与硬件20」Canvas 组件的进阶应用与动态绘图（下）
• 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解

---

小结

本篇教程通过倒计时环形进度条的实现，展示了 Canvas 绘图与时间控制的结合应用，强化了动态 UI 和交互设计能力。该应用具有直观的时间显示方式，是计时类应用的理想示例。

---

下一篇预告

在下一篇「UI互动应用篇17 - 照片墙布局」中，我们将探索如何创建一个动态照片墙，展示图片的瀑布流布局效果。

---

上一篇： 「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版

下一篇： 「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=337
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---