組件可見區(qū)域變化事件
組件可見區(qū)域變化事件是組件在屏幕中的顯示區(qū)域面積變化時觸發(fā)的事件,提供了判斷組件是否完全或部分顯示在屏幕中的能力,適用于廣告曝光埋點(diǎn)之類的場景。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
從API Version 9開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
事件
名稱 | 功能描述 |
---|---|
onVisibleAreaChange(ratios: Array, event: (isVisible: boolean, currentRatio: number) => void) | 組件可見區(qū)域變化時觸發(fā)該回調(diào)。 -ratios:閾值數(shù)組。其中,每個閾值代表組件可見面積(即組件在屏幕顯示區(qū)的面積)與組件自身面積的比值。當(dāng)組件可見面積與自身面積的比值大于或小于閾值時,均會觸發(fā)該回調(diào)。每個閾值的取值范圍為[0.0, 1.0],如果開發(fā)者設(shè)置的閾值超出該范圍,則會實(shí)際取值0.0或1.0. -isVisible:表示組件的可見面積與自身面積的比值是否大于閾值,true表示大于,false表示小于。 -currentRatio:觸發(fā)回調(diào)時,組件可見面積與自身面積的比值。**說明:**該接口只適用于組件布局區(qū)域超出或離開了當(dāng)前屏幕顯示區(qū)域的情況,不支持組件堆疊(Stack)導(dǎo)致的面積不可見、使用offset或translate等圖形變換接口導(dǎo)致的面積超出情況。 |
示例
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
// xxx.ets
@Entry
@Component
struct ScrollExample {
scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State testTextStr: string = 'test'
@State testRowStr: string = 'test'
build() {
Column() {
Column() {
Text(this.testTextStr)
.fontSize(20)
Text(this.testRowStr)
.fontSize(20)
}
.height(100)
.backgroundColor(Color.Gray)
.opacity(0.3)
Scroll(this.scroller) {
Column() {
Text("Test Text Visible Change")
.fontSize(20)
.height(200)
.margin({ top: 50, bottom: 20 })
.backgroundColor(Color.Green)
// 通過設(shè)置ratios為[0.0, 1.0],實(shí)現(xiàn)當(dāng)組件完全顯示或完全消失在屏幕中時觸發(fā)回調(diào)
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) = > {
console.info('Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
if (isVisible && currentRatio >= 1.0) {
console.info('Test Text is fully visible. currentRatio:' + currentRatio)
this.testTextStr = 'Test Text is fully visible'
}
if (!isVisible && currentRatio <= 0.0) {
console.info('Test Text is completely invisible.')
this.testTextStr = 'Test Text is completely invisible'
}
})
Row() {
Text('Test Row Visible Change')
.fontSize(20)
.margin({ bottom: 20 })
}
.height(200)
.backgroundColor(Color.Yellow)
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) = > {
console.info('Test Row isVisible:' + isVisible + ', currentRatio:' + currentRatio)
if (isVisible && currentRatio >= 1.0) {
console.info('Test Row is fully visible.')
this.testRowStr = 'Test Row is fully visible'
}
if (!isVisible && currentRatio <= 0.0) {
console.info('Test Row is is completely invisible.')
this.testRowStr = 'Test Row is is completely invisible'
}
})
ForEach(this.arr, (item) = > {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}, item = > item)
}.width('100%')
}
.backgroundColor(0x317aff)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarColor(Color.Gray)
.scrollBarWidth(10)
.onScroll((xOffset: number, yOffset: number) = > {
console.info(xOffset + ' ' + yOffset)
})
.onScrollEdge((side: Edge) = > {
console.info('To the edge')
})
.onScrollStop(() = > {
console.info('Scroll Stop')
})
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
}
}
審核編輯 黃宇
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。
舉報投訴
-
組件
+關(guān)注
關(guān)注
1文章
499瀏覽量
17774 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2295瀏覽量
42636
發(fā)布評論請先 登錄
相關(guān)推薦
HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS的聲明式開發(fā)范式
基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、
發(fā)表于 01-17 15:09
HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS組件可見區(qū)域變化事件
一、事件組件可見區(qū)域變化事件是組件在屏幕中的顯示區(qū)域面積變化
發(fā)表于 03-17 16:25
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【按鍵事件】
按鍵事件指組件與鍵盤、遙控器等按鍵設(shè)備交互時觸發(fā)的事件,適用于所有可獲焦組件,例如Button。對于Text,Image等默認(rèn)不可獲焦的組件,可以設(shè)置focusable屬性為true后使用按鍵事件。
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【焦點(diǎn)事件】
焦點(diǎn)事件指頁面焦點(diǎn)在可獲焦組件間移動時觸發(fā)的事件,組件可使用焦點(diǎn)事件來處理相關(guān)邏輯。
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【組件快捷鍵事件】
開發(fā)者可以設(shè)置組件的自定義組合鍵,組合鍵的行為與click行為一致,組件在未獲得焦點(diǎn)狀態(tài)下也可以響應(yīng)自定義組合鍵,每個組件可以設(shè)置多個組合鍵。
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【顯隱控制】 通用屬性
控制當(dāng)前組件顯示或隱藏。注意,即使組件處于隱藏狀態(tài),在頁面刷新時仍存在重新創(chuàng)建過程,因此當(dāng)對性能有嚴(yán)格要求時建議使用[條件渲染]代替。 默認(rèn)值:Visibility.Visible 從API version 9開始,該接口支持在
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【形狀裁剪】 通用屬性
參數(shù)為相應(yīng)類型的組件,按指定的形狀對當(dāng)前組件進(jìn)行裁剪;參數(shù)為boolean類型時,設(shè)置是否按照父容器邊緣輪廓進(jìn)行裁剪。 默認(rèn)值:false 從API version 9開始,該接口支持在Ark
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【菜單控制】 通用屬性
為組件綁定彈出式菜單,彈出式菜單以垂直列表形式顯示菜單項(xiàng),可通過長按、點(diǎn)擊或鼠標(biāo)右鍵觸發(fā)。
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【組件標(biāo)識】 通用屬性
id為組件的唯一標(biāo)識,在整個應(yīng)用內(nèi)唯一。本模塊提供組件標(biāo)識相關(guān)接口,可以獲取指定id組件的屬性,也提供向指定id組件發(fā)送事件的功能。
鴻蒙ArkTS聲明式開發(fā):跨平臺支持列表【觸摸測試控制】觸摸交互控制
設(shè)置組件的觸摸測試類型。ArkUI開發(fā)框架在處理觸屏事件時,會在觸屏事件觸發(fā)前,進(jìn)行按壓點(diǎn)和組件區(qū)域的觸摸測試來收集需要響應(yīng)觸屏事件的組件,
評論