
回复
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
倒计时环形进度条允许用户设置一个初始倒计时时间,并以环形进度条和数字的方式动态显示剩余时间。倒计时结束时,环形进度条归零并显示“时间到”提示。
@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; // 定时器ID
build() {
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, // 最大进度为100
type: 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.ets
import { CountdownProgress } from './CountdownProgress';
@Entry
@Component
struct Index {
build() {
Column() {
CountdownProgress() // 调用倒计时进度条组件
}
.padding(20)
}
}
效果示例:用户设置倒计时时间后,启动倒计时环形进度条逐渐递减,伴随数字显示时间的变化。当时间归零时,环形进度条完全消失。
setInterval
定时减少 timeLeft
,实现倒计时功能。@State
实时更新倒计时状态,并联动更新画布内容。本篇教程通过倒计时环形进度条的实现,展示了 Canvas 绘图与时间控制的结合应用,强化了动态 UI 和交互设计能力。该应用具有直观的时间显示方式,是计时类应用的理想示例。
在下一篇「UI互动应用篇17 - 照片墙布局」中,我们将探索如何创建一个动态照片墙,展示图片的瀑布流布局效果。
作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=337
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。