組件區(qū)域變化事件

2024-01-22 11:23 更新

組件區(qū)域變化事件指組件顯示的尺寸、位置等發(fā)生變化時(shí)觸發(fā)的事件。

說(shuō)明

從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

事件

名稱

支持冒泡

功能描述

onAreaChange(event: (oldValue: Area, newValue: Area) => void)

組件區(qū)域變化時(shí)觸發(fā)該回調(diào)。僅會(huì)響應(yīng)由布局變化所導(dǎo)致的組件大小、位置發(fā)生變化時(shí)的回調(diào)。由繪制變化所導(dǎo)致的渲染屬性變化不會(huì)響應(yīng)回調(diào),如translate、offset。

Area:返回目標(biāo)元素的寬高以及目標(biāo)元素相對(duì)父元素和頁(yè)面左上角的坐標(biāo)位置。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct AreaExample {
  5. @State value: string = 'Text'
  6. @State sizeValue: string = ''
  7. build() {
  8. Column() {
  9. Text(this.value)
  10. .backgroundColor(Color.Green).margin(30).fontSize(20)
  11. .onClick(() => {
  12. this.value = this.value + 'Text'
  13. })
  14. .onAreaChange((oldValue: Area, newValue: Area) => {
  15. console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
  16. this.sizeValue = JSON.stringify(newValue)
  17. })
  18. Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
  19. }
  20. .width('100%').height('100%').margin({ top: 30 })
  21. }
  22. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)