19、跟踪界面元素可见性

Compose 中的可见性跟踪

跟踪界面元素何时在屏幕上显示对多种场景很有用，例如记录分析数据、管理界面状态，以及通过自动播放或暂停视频内容来优化资源。Compose 提供了多个用于跟踪界面元素可见性的修饰符。

可见性跟踪修饰符

Compose 提供了以下用于跟踪可见性的修饰符：

• onVisibilityChanged - 当可组合项的可见性发生变化时通知。适合在每次可组合函数变为可见时触发操作或附带效应。
• onLayoutRectChanged - 提供有关可组合项相对于根、窗口和屏幕的边界信息。这是低级别控制，是 onVisibilityChanged 的基础 API。
• 与 onGloballyPositioned 类似，但提供更出色的性能和更高的灵活性。

这些 API 可以与任何可组合项搭配使用，作为修饰符链的一部分。

使用 onVisibilityChanged 跟踪可见性变化

了解商品何时对用户可见或部分可见有助于跟踪分析数据、优化性能，甚至触发事件。

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)

onVisibilityChanged 修饰符提供了一个布尔值，反映可组合项的当前可见性状态。它还提供 minFraction 和 minDurationMs 等参数，用于更精细地控制何时触发可见性回调。

注意：修饰符顺序很重要。为了确保修饰符影响整个可组合项以及内边距，应在 padding 修饰符之前添加 onVisibilityChanged 修饰符。

为可组合函数设置时间限制

有时，仅在某个商品对用户可见一定时间后才触发操作是有用的，例如自动播放视频。

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {
    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}

minDurationMs 参数指定可组合项需要持续可见的最短时间，以便触发回调。如果可组合函数在持续时间结束之前停止显示，计时器会重置。默认值为 0 毫秒。

设置最小可见分数

在处理可滚动内容（如 LazyColumn）时，为可组合函数的可见性回调设置最小可见比例有助于优化数据提取。

LazyColumn(modifier = modifier.fillMaxSize()) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}

minFractionVisible 参数定义可组合项被标记为可见所需在屏幕上显示的比例。它支持 0.0f 到 1.0f 范围内的浮点值，默认设置为 1.0f。

• 1.0f 表示可组合项需要完全显示在屏幕上，才能触发回调。
• 0.2f 表示当 20% 的可组合项可见时触发回调，有助于预加载内容。

这些可见性修饰符为开发者提供了灵活的方式来响应 UI 元素的可见性变化，从而创建更智能、更高效的用户界面。