1# 组件可见区域变化事件 2 3组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件，提供了判断组件是否完全或部分显示在屏幕中的能力，适用于广告曝光埋点之类的场景。 4 5> **说明：** 6> 7> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 事件 11 12| 名称 | 功能描述 | 13| ---------------------------------------- | ---------------------------------------- | 14| onVisibleAreaChange(ratios: Array\<number>, event: (isVisible: boolean, currentRatio: number) => void) | 组件可见区域变化时触发该回调。<br/>-ratios：阈值数组。其中，每个阈值代表组件可见面积（即组件在屏幕显示区的面积，只计算父组件内的面积，超出父组件部分不会计算）与组件自身面积的比值。当组件可见面积与自身面积的比值接近阈值时，均会触发该回调。每个阈值的取值范围为[0.0, 1.0]，如果开发者设置的阈值超出该范围，则会实际取值0.0或1.0。<br/>-isVisible：表示组件的可见面积与自身面积的比值与上一次变化相比的情况，比值变大为true，比值变小为false。<br/>-currentRatio：触发回调时，组件可见面积与自身面积的比值。<br/>-currentRatio：触发回调时，组件可见面积与自身面积的比值。 | 15 16> **说明：** 17> 18> 该接口只适用于组件布局区域超出或离开了当前屏幕显示区域的情况，不支持组件堆叠（Stack）导致的面积不可见、使用offset或translate等图形变换接口导致的面积超出情况。 19 20## 示例 21 22```ts 23// xxx.ets 24@Entry 25@Component 26struct ScrollExample { 27 scroller: Scroller = new Scroller() 28 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 29 @State testTextStr: string = 'test' 30 @State testRowStr: string = 'test' 31 32 build() { 33 Column() { 34 Column() { 35 Text(this.testTextStr) 36 .fontSize(20) 37 38 Text(this.testRowStr) 39 .fontSize(20) 40 } 41 .height(100) 42 .backgroundColor(Color.Gray) 43 .opacity(0.3) 44 45 Scroll(this.scroller) { 46 Column() { 47 Text("Test Text Visible Change") 48 .fontSize(20) 49 .height(200) 50 .margin({ top: 50, bottom: 20 }) 51 .backgroundColor(Color.Green) 52 // 通过设置ratios为[0.0, 1.0]，实现当组件完全显示或完全消失在屏幕中时触发回调 53 .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 54 console.info('Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio) 55 if (isVisible && currentRatio >= 1.0) { 56 console.info('Test Text is fully visible. currentRatio:' + currentRatio) 57 this.testTextStr = 'Test Text is fully visible' 58 } 59 60 if (!isVisible && currentRatio <= 0.0) { 61 console.info('Test Text is completely invisible.') 62 this.testTextStr = 'Test Text is completely invisible' 63 } 64 }) 65 66 Row() { 67 Text('Test Row Visible Change') 68 .fontSize(20) 69 .margin({ bottom: 20 }) 70 71 } 72 .height(200) 73 .backgroundColor(Color.Yellow) 74 .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 75 console.info('Test Row isVisible:' + isVisible + ', currentRatio:' + currentRatio) 76 if (isVisible && currentRatio >= 1.0) { 77 console.info('Test Row is fully visible.') 78 this.testRowStr = 'Test Row is fully visible' 79 } 80 81 if (!isVisible && currentRatio <= 0.0) { 82 console.info('Test Row is completely invisible.') 83 this.testRowStr = 'Test Row is completely invisible' 84 } 85 }) 86 87 ForEach(this.arr, (item:number) => { 88 Text(item.toString()) 89 .width('90%') 90 .height(150) 91 .backgroundColor(0xFFFFFF) 92 .borderRadius(15) 93 .fontSize(16) 94 .textAlign(TextAlign.Center) 95 .margin({ top: 10 }) 96 }, (item:number) => (item.toString())) 97 98 }.width('100%') 99 } 100 .backgroundColor(0x317aff) 101 .scrollable(ScrollDirection.Vertical) 102 .scrollBar(BarState.On) 103 .scrollBarColor(Color.Gray) 104 .scrollBarWidth(10) 105 .onScroll((xOffset: number, yOffset: number) => { 106 console.info(xOffset + ' ' + yOffset) 107 }) 108 .onScrollEdge((side: Edge) => { 109 console.info('To the edge') 110 }) 111 .onScrollStop(() => { 112 console.info('Scroll Stop') 113 }) 114 115 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 116 } 117} 118``` 119 120 121
