HarmonyOS鸿蒙Next中onVisibleAreaChange的判断是否显示问题

HarmonyOS鸿蒙Next中onVisibleAreaChange的判断是否显示问题 在之前的版本中，onVisibleAreaChange 回调的 isVisible 是判断当前视图是否可见。我的使用场景是 List 中的每个 item 判断是否可见，需求是 item 其中部分可见，就算整体 item 都可见。

但是现在 API 修改了。

  • isVisible：表示组件的可见面积与自身面积的比值与上一次变化相比的情况，比值变大为 true，比值变小为 false。
3 回复

根据描述，下面做了下简版demo,测试是正常的，部分可见就当作全部可见

@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State str:string = '完全不可见'
  build() {
    Column() {
      Text(this.str)
        .fontSize(24)
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number,index:number) => {
          ListItem() {
            if(index==0){
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
                // 组件可见区域变化事件
                .onVisibleAreaChange([0,1],(isVisible: boolean, currentRatio: number)=>{
                  if(currentRatio==0){
                    this.str = '完全不可见'
                  } else {
                    this.str = '可见'
                  }
                })
            } else {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
        console.info('first' + firstIndex)
        console.info('last' + lastIndex)
        console.info('center' + centerIndex)
      })
      .onScroll((scrollOffset: number, scrollState: ScrollState) => {
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
      })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

更多关于HarmonyOS鸿蒙Next中onVisibleAreaChange的判断是否显示问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，onVisibleAreaChange是用于监听组件可见区域变化的回调方法。该方法会在组件的可见区域发生变化时触发，开发者可以通过该方法来判断组件是否显示在屏幕上。onVisibleAreaChange的触发条件包括组件进入或离开屏幕、组件在屏幕中的可见比例发生变化等。

在onVisibleAreaChange回调中，可以通过VisibleAreaChangeEvent对象获取组件的可见区域信息，包括可见比例、可见区域的位置和大小等。开发者可以根据这些信息来判断组件是否显示在屏幕上，或者是否达到了某个特定的可见比例。

例如，可以通过event.isVisible来判断组件是否完全显示在屏幕上，或者通过event.visibleRatio来判断组件的可见比例是否达到了某个阈值。开发者可以根据这些信息来执行相应的逻辑，例如加载数据、暂停动画等。

需要注意的是，onVisibleAreaChange的触发频率可能会比较高，因此在处理逻辑时需要注意性能优化，避免频繁的操作影响应用的流畅性。

在HarmonyOS鸿蒙Next中，onVisibleAreaChange是用于监听组件在可视区域内的变化事件。通过该事件，可以判断组件是否在屏幕上显示。当组件的可视区域比例发生变化时，系统会触发该回调，返回当前组件在屏幕上的可见比例（visibleRatio）。开发者可以根据visibleRatio的值判断组件是否完全显示（visibleRatio >= 1）或部分显示（0 < visibleRatio < 1），从而实现动态加载或优化性能等逻辑。

回到顶部