如何计算RecyclerView中Compose子项的可见百分比？

问题原因 #

你遇到的核心问题是Compose布局系统与RecyclerView的原生布局系统相互独立：

• 你在onGloballyPositioned中获取的boundsInParent/boundsInRoot，是相对于Compose内部的子项根容器（而非RecyclerView的视口）。滚动RecyclerView时，Compose子项在自身的Compose布局树中位置并未改变，因此这些边界值不会更新，导致计算出的可见区域始终等于子项尺寸。
• 而LazyColumn是Compose原生滚动容器，子项的boundsInParent是相对于LazyColumn的布局视口，滚动时子项在LazyColumn中的位置会动态变化，因此能正确计算可见百分比。

解决方案 #

要解决这个问题，需要结合RecyclerView的原生滚动监听和View的全局可见区域计算，因为只有RecyclerView能感知自身视口的滚动变化，再通过View的API获取子项在视口中的真实可见区域。

实现步骤与代码示例 #

1. 在RecyclerView的Adapter中，使用ComposeView承载Compose子项内容。
2. 在Compose内部获取当前View实例，绑定RecyclerView的滚动监听。
3. 每次滚动时，计算子项View与RecyclerView视口的交集区域，进而得到可见百分比。

class ComposeItemAdapter(private val items: List<String>) : RecyclerView.Adapter<ComposeItemAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: ComposeView) : RecyclerView.ViewHolder(itemView) {
        fun bind(item: String) {
            itemView.setContent {
                val currentView = LocalView.current
                // 遍历父视图找到RecyclerView（根据实际布局层级调整）
                val recyclerView = findParentRecyclerView(currentView) ?: return@setContent

                LaunchedEffect(Unit) {
                    val scrollListener = object : RecyclerView.OnScrollListener() {
                        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                            super.onScrolled(recyclerView, dx, dy)
                            calculateVisiblePercentage(currentView, recyclerView)
                        }
                    }
                    recyclerView.addOnScrollListener(scrollListener)

                    // 视图销毁时移除监听，避免内存泄漏
                    currentView.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
                        override fun onViewAttachedToWindow(v: View) {}
                        override fun onViewDetachedFromWindow(v: View) {
                            recyclerView.removeOnScrollListener(scrollListener)
                        }
                    })
                }

                // 你的Compose子项布局
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(Color.LightGray)
                ) {
                    Text(text = item, modifier = Modifier.align(Alignment.Center))
                }
            }
        }

        private fun findParentRecyclerView(view: View): RecyclerView? {
            var parent = view.parent
            while (parent is View) {
                if (parent is RecyclerView) {
                    return parent
                }
                parent = parent.parent
            }
            return null
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val composeView = ComposeView(parent.context).apply {
            layoutParams = RecyclerView.LayoutParams(
                RecyclerView.LayoutParams.MATCH_PARENT,
                RecyclerView.LayoutParams.WRAP_CONTENT
            )
        }
        return ViewHolder(composeView)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(items[position])
    }

    override fun getItemCount() = items.size

    private fun calculateVisiblePercentage(itemView: View, recyclerView: RecyclerView) {
        val itemGlobalRect = Rect()
        val isItemVisible = itemView.getGlobalVisibleRect(itemGlobalRect)
        if (!isItemVisible) {
            L.d("TAG", "Item completely invisible, percentage: 0")
            return
        }

        val recyclerViewGlobalRect = Rect()
        recyclerView.getGlobalVisibleRect(recyclerViewGlobalRect)

        // 计算子项与RecyclerView视口的交集区域
        val visibleIntersectionRect = Rect()
        if (!Rect.intersects(itemGlobalRect, recyclerViewGlobalRect)) {
            L.d("TAG", "No intersection with RecyclerView, percentage: 0")
            return
        }
        visibleIntersectionRect.setIntersect(itemGlobalRect, recyclerViewGlobalRect)

        // 计算可见百分比
        val totalArea = itemView.width * itemView.height.toFloat()
        val visibleArea = visibleIntersectionRect.width() * visibleIntersectionRect.height.toFloat()
        val visiblePercentage = if (totalArea == 0f) 0f else visibleArea / totalArea

        L.d("TAG", "In recyclerview: $visiblePercentage")
    }
}

关键注意点 #

• 父视图层级适配：findParentRecyclerView方法通过遍历父视图找到RecyclerView，需根据你的实际布局结构调整（比如如果ComposeView被包裹在其他ViewGroup中，要确保遍历逻辑正确）。
• 内存泄漏防护：必须在View从窗口分离时移除RecyclerView的滚动监听，避免持有无用引用。
• 性能优化：如果列表项数量较多，可考虑优化滚动监听的触发频率，比如添加防抖逻辑，避免频繁计算。

内容的提问来源于stack exchange，提问作者Rocky Zhang