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

5 回复

这种情况应该跟渲染有关系,在动画的时候,如果动画的刷新帧率超过了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去掉后,就正常了这是为什么,有没有大佬给解惑一下

点击前

cke_127.png

点击后

cke_1123.png

在嵌套Row后消失可能是布局层级影响了组件状态管理。鸿蒙Next中UI组件状态依赖ArkUI框架的声明式管理,当TextTimer被多层Row嵌套时,可能会触发布局重建导致计时器状态丢失。检查Row的宽度是否设置为固定值或百分比,不合理的宽度约束会导致子组件被裁剪。TextTimer需确保在布局变化时保持稳定父容器,可尝试用Column替代Row测试布局兼容性。若涉及状态保持,需明确使用@State修饰计时器变量。

这个问题是由于TextTimer组件在嵌套Row布局后,点击事件触发了组件的重新渲染导致计时器被重置。具体原因分析:

  1. 当TextTimer直接放在Stack中时,点击事件只影响Stack的translate动画,不会导致TextTimer重新初始化。

  2. 当TextTimer嵌套在Row中后,点击事件触发的动画会引发Row布局的重新计算,导致TextTimer组件被重新创建。

  3. 解决方案可以尝试以下两种方式:

  • 去掉不必要的Row嵌套(如你发现的)
  • 将TextTimer的controller状态提升到组件级别,确保重新渲染时保持状态

根本原因是HarmonyOS的UI更新机制在布局变化时会重新创建子组件,而TextTimer作为状态组件需要特别注意保持其控制器实例。

回到顶部