Flutter 计算列表项是否露出-显示-CFANZ编程社区

GitHub 源码

ListItemExposeManager.dart 封装了获取 Coordinate、Dimension，判断是否漏出的逻辑
ScrollViewPage.dart 演示页面

需求

在类似 ScrollView 的滑动布局中，当某个子View 露出后进行上报

方法

根据 ScrollView 的 Global坐标（原点是屏幕）、视窗（可见区域）高度，计算子View 需要 scroll 多少 offset才可以露出
Widget的 Global坐标、dimension（尺寸），通过 Widget设置的 GlobalKey 进行查询
- 首次没有滑动时，需要主动测量。其他根据 scrollController 的回调开始测量。

注意

根据 Key 获取 context （其实是 Element）获取 RenderObject，有可能 context、RenderObject 为null。
widget 不可见时，Element是null，做好非空判断。
widget 可见时，Element也可能是null。我遇到了这个case，换个父布局设置key就行了（我的情况中，两者布局没有差异）

代码

import 'package:flutter/cupertino.dart';

class ListItemExposeManager {
  bool isExpose = false;
  GlobalKey listItemViewKey;
  GlobalKey scrollViewKey;
  Function(bool isExpose) exposeCallback;
  ScrollController scrollViewController;

  /// Be attention, not every widget will mapping to RenderObject, Element.
  /// Sometime the widget is just constraint, Change another widget to set key if RenderObject is null.
  ListItemExposeManager(this.listItemViewKey, this.scrollViewKey,
      this.scrollViewController, this.exposeCallback) {
    scrollViewController.addListener(() => updateStatus());
    WidgetsBinding.instance?.addPostFrameCallback((_) => updateStatus());
  }

  void updateStatus() {
    RenderObject? renderObject =
        listItemViewKey.currentContext?.findRenderObject();
    if (renderObject is! RenderBox) {
      return;
    }
    RenderBox listItemRenderBox = renderObject;
    /// 全局坐标系 坐标
    Offset listItemPosition = listItemRenderBox.localToGlobal(Offset.zero);
    Size listItemSize = listItemRenderBox.size;
    if (listItemPosition == null || listItemSize == null) {
      return;
    }

    RenderObject? scrollViewRenderObject =
        scrollViewKey.currentContext?.findRenderObject();
    if (scrollViewRenderObject is! RenderBox) {
      return;
    }
    RenderBox scrollViewRenderBox = scrollViewRenderObject;
    Offset scrollViewPosition = scrollViewRenderBox.localToGlobal(Offset.zero);
    Size scrollViewSize = scrollViewRenderBox.size;
    if (scrollViewPosition == null || scrollViewSize == null) {
      return;
    }

    double minScrollDy = listItemPosition.dy +
        listItemSize.height -
        scrollViewPosition.dy -
        scrollViewSize.height;

    bool afterListView = minScrollDy > 0;
    bool beforeListView = listItemPosition.dy + listItemSize.height < scrollViewPosition.dy;
    bool currentIsExpose = !beforeListView && !afterListView;

    if (currentIsExpose != isExpose) {
      exposeCallback(currentIsExpose);
    }
    isExpose = currentIsExpose;
  }

}

参考

参考 Github demo