HarmonyOS鸿蒙Next中请问TextTimer多嵌套一层Row后,点击后TextTimer为何会消失,代码如下
HarmonyOS鸿蒙Next中请问TextTimer多嵌套一层Row后,点击后TextTimer为何会消失,代码如下
@State yyyyyy: number = 0; @State countDownTime2: number = 0; //倒计时-剩余时间 textTimerController2: TextTimerController = new TextTimerController() private gradientColor: LinearGradient = new LinearGradient([{ color: ‘#81D3F8’, offset: 1 }, { color: ‘#81D3F8’, offset: 0.5 }])
build() { Column() { Row() { Stack({ alignContent: Alignment.Center }) { Progress({ value: this.countDownTime2, total: 60, type: ProgressType.Ring }) .width(40) .height(40) .style({ strokeWidth: 2 }) .backgroundColor(’#33929292’) .color(this.gradientColor)
Row() {
TextTimer({ isCountDown: true, count: 59 * 1000, controller: this.textTimerController2 })
.format('s')
.fontColor('#81D3F8')
.fontSize(12)
.onTimer((utc: number, elapsedTime: number) => {
this.countDownTime2 = 59 - elapsedTime
})
Text('秒')
.fontSize(12)
.fontColor('#81D3F8')
}
}
.width(40)
.height(40)
.margin({ top: 50 })
.translate({ y: this.yyyyyy })
.onClick(() => {
this.textTimerController2.pause()
setTimeout(() => {
animateTo({ duration: 1000 }, () => {
this.yyyyyy = -200
})
}, 1000)
})
}
} .width(‘100%’) .height(‘100%’) .padding({ top: 64 }) .backgroundColor(Color.Green) }
如果把Row去掉后,就正常了这是为什么,有没有大佬给解惑一下
更多关于HarmonyOS鸿蒙Next中请问TextTimer多嵌套一层Row后,点击后TextTimer为何会消失,代码如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这种情况应该跟渲染有关系,在动画的时候,如果动画的刷新帧率超过了TextTimer的渲染刷新速度,就会出现这种情况,你可以调一下 距离,看一下 运行情况 this.yyyyyy = -10
@Entry
@Component
struct Index {
@State yyyyyy: number = 0;
@State countDownTime2: number = 0; //倒计时-剩余时间
textTimerController2: TextTimerController = new TextTimerController()
private gradientColor: LinearGradient = new LinearGradient([{ color: '#81D3F8', offset: 1 },
{ color: '#81D3F8', offset: 0.5 }])
build() {
Column() {
Row() {
Stack({ alignContent: Alignment.Center }) {
Progress({ value: this.countDownTime2, total: 60, type: ProgressType.Ring })
.width(40)
.height(40)
.style({ strokeWidth: 2 })
.backgroundColor('#33929292')
.color(this.gradientColor)
Row() {
TextTimer({ isCountDown: true, count: 59 * 1000, controller: this.textTimerController2 })
.format('s')
.fontColor('#81D3F8')
.fontSize(12)
.onTimer((utc: number, elapsedTime: number) => {
this.countDownTime2 = 59 - elapsedTime
})
Text('秒')
.fontSize(12)
.fontColor('#81D3F8')
}
.backgroundColor(Color.Blue)
}
.width(40)
.height(40)
.backgroundColor(Color.Red)
.translate({ y: this.yyyyyy })
.onClick(() => {
this.textTimerController2.pause()
setTimeout(() => {
animateTo({ duration: 1000 }, () => {
this.yyyyyy = -10
})
}, 1000)
})
}
.width(40)
.height(40)
.backgroundColor(Color.Orange)
}
.width('100%')
.height('100%')
.padding({ top: 64 })
.backgroundColor(Color.Green)
}
}
更多关于HarmonyOS鸿蒙Next中请问TextTimer多嵌套一层Row后,点击后TextTimer为何会消失,代码如下的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
如果把Row(最外层的Row)或者动画animateTo去掉后,就正常了这是为什么,有没有大佬给解惑一下
点击前
点击后
在嵌套Row后消失可能是布局层级影响了组件状态管理。鸿蒙Next中UI组件状态依赖ArkUI框架的声明式管理,当TextTimer被多层Row嵌套时,可能会触发布局重建导致计时器状态丢失。检查Row的宽度是否设置为固定值或百分比,不合理的宽度约束会导致子组件被裁剪。TextTimer需确保在布局变化时保持稳定父容器,可尝试用Column替代Row测试布局兼容性。若涉及状态保持,需明确使用@State修饰计时器变量。
这个问题是由于TextTimer组件在嵌套Row布局后,点击事件触发了组件的重新渲染导致计时器被重置。具体原因分析:
-
当TextTimer直接放在Stack中时,点击事件只影响Stack的translate动画,不会导致TextTimer重新初始化。
-
当TextTimer嵌套在Row中后,点击事件触发的动画会引发Row布局的重新计算,导致TextTimer组件被重新创建。
-
解决方案可以尝试以下两种方式:
- 去掉不必要的Row嵌套(如你发现的)
- 将TextTimer的controller状态提升到组件级别,确保重新渲染时保持状态
根本原因是HarmonyOS的UI更新机制在布局变化时会重新创建子组件,而TextTimer作为状态组件需要特别注意保持其控制器实例。