鸿蒙ArkTs 可见区域变化：公共事件onVisibleAreaChange的使用方法介绍

引入

在做项目的时候，突然遇到了一个问题

这是一个scroll，分为两个区域，橙色和绿色，他们的高度都暂定为100%

此时，我希望滑动到下方的绿色区域的时候做出弹窗提示

非常简单，采用scroll的onScrollEdge轻松实现

@Entry
@Component
struct VisibilityPage {

  build() {
    Scroll(){
      Column(){
        Text('区域一')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Orange)
        Text('区域二')
          .height('100%')
          .width('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)

      }
      .width('100%')
    }
    .onScrollEdge((side) => {
    //通过触底的事件来弹出提示
      if (side==Edge.Bottom) {
        AlertDialog.show({message:'欢迎来到区域二'})
      }
    })
    .height('100%')
    .width('100%')
  }
}

但是，这时候需求变更，当区域二的70%展示出来的时候，我们就可以确定已经达到区域二了，可以弹出提示窗了

这个展示70%要怎么实现呢？

经过查阅文档，原来还有这样的一个神奇的事件

组件可见区域变化事件

onVisibleAreaChange(ratios: Array<number>, event: VisibleAreaChangeCallback): T

它可以用来监听区域变化

我们先看下它的参数

ratios：阈值数组

可能这个名词很令人困惑，什么是阈值数组呢？

当需要添加事件的组件，可见的面积到达阈值的时候，就会触发回调

举个例子，我们定义一个数组

arr=[ 0.3，0.5，0.7，1]

当它作为阈值数组的时候

展示区域占区域二的30%，50%，70%，和100%的时候，触发回调

注意并不绝对，当接近阈值的时候就会触发（系统帮你四舍五入）

event:回调函数

它的函数类型是

(isExpanding: boolean, currentRatio: number) => void

isExpanding：直译过来就是是否变大，变大就是true，变小就是false

currentRatio：当前的可见比例

具体示例

现在让我们再回过头看下上面的需求，来试一下onVisibleAreaChange事件吧

@Entry
@Component
struct VisibilityPage {

  arr:number[]=[0.3,0.5,0.7,1]
  build() {
    Scroll(){
      Column(){
        Text('区域一')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Orange)
        Text('区域二')
          .height('100%')
          .width('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .onVisibleAreaChange(this.arr,(isExpanding:boolean,currentRatio:number)=>{
            console.log('当前可见比例:',currentRatio,'   是否处于扩展状态:',isExpanding)
          })

      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

接下来我们滑动到最下方，再滑动回顶部，观测日志

这下很清晰就可以看到回调的次数和过程了，

其他场景

除了使用比例外，其实可以直接传入一个数组  [0]  

用来监听一个控件的展示与消失

.onVisibleAreaChange([0],(isExpanding:boolean)=>{
            if (isExpanding) {
              //todo 展示出来了
              console.log('===show')
            }else {
              //todo 隐藏了
              console.log('===hide')
            }
          })