HarmonyOS 鸿蒙Next @State变量在闭包中修改能够引起UI更新,但是在实例方法中不行

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @State变量在闭包中修改能够引起UI更新,但是在实例方法中不行

长按’长按按钮’触发 代码如下,长按按钮的onTouchDown事件在方法内改变@state变量无法引起UI刷新,但是在onTouchUp事件使用闭包能够引起UI更新

@Component
struct ContainerView {
  @BuilderParam child: () => void

  onTouchDown = ()=>{}
  onTouchUp = ()=>{}

  build() {
    Column() {
      Button('长按按钮')
        .onTouch((event)=>{
          if (event.type == TouchType.Down) {
            this.onTouchDown()
          } else if (event.type == TouchType.Up) {
            this.onTouchUp()
          }
        })
      this.child()
    }
  }
}

@Component
struct CustomBtn {
  build() {
    Button('自定义按钮')
  }
}

@Entry
@Component
struct MainPage {

  [@State](/user/State) title: string = '未点击'

  build() {
    Column() {
      ContainerView(
        {
          onTouchDown: this.onTouchDown,
          onTouchUp: ()=>{
            this.title = 'onTouchUp'
          }
        }
      ) {
        Text(this.title)
          .fontSize(200)

        CustomBtn()
          .onClick(()=>{
            console.log('已被点击')
          })
          .enabled(this.title == '未点击')
      }
    }
  }

  onTouchDown() {
    this.title = '已点击'
  }

  private onTouchUp() {
    this.title = '未点击'
  }
}

3 回复

onTouchDown函数改为箭头函数

onTouchDown=()=> {
    this.title = '已点击'
  }
 

使用箭头函数的形式把[@Builder](/user/Builder)传递进自定义组件ChildPage中,当前this指向会停留在父组件ParentPage里,所以在父组件里改变label的值。

// 当前this会指向自定义组件内部,所以在父组件里面改变title的值,自定义组件ContainerView是感知不到的
// onTouchDown: this.onTouchDown,
// 下面两种方法可以更新
// onTouchDown: this.onTouchDown.bind(this),
onTouchDown: () => { this.onTouchDown() },
onTouchUp: ()=>{
this.title = 'onTouchUp'
}

参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5#%E6%94%B9%E5%8F%98%E5%86%85%E5%AE%B9ui%E4%B8%8D%E5%88%B7%E6%96%B0

在HarmonyOS鸿蒙开发框架中,@State变量是用于管理UI状态的,其值的变化会自动触发UI的重新渲染。当你在闭包中修改@State变量时,由于闭包通常与组件的UI渲染逻辑紧密相关,因此这种修改能够立即被系统捕获并触发UI更新。

然而,在实例方法中修改@State变量时,情况就有所不同。实例方法可能并不直接参与UI渲染流程,或者其调用时机和上下文可能使得状态变化未能被立即感知。此外,如果实例方法的调用是在异步操作或事件处理中,那么状态更新可能由于事件循环或线程切换而延迟,导致UI未能即时响应。

为确保在实例方法中修改@State变量后能够引起UI更新,你可以考虑以下几种方法:

  1. 确保实例方法是在正确的生命周期或事件处理上下文中被调用。
  2. 使用@Composable函数来封装状态更新逻辑,使其与UI渲染更加紧密地关联。
  3. 如果涉及异步操作,确保使用适当的异步处理机制(如futureasync-await),并在状态更新后通知UI系统。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部