Android Jetpack Compose防抖的实现方式

前言

在 Jetpack Compose 中，onGloballyPositioned 和 onSizeChanged 都是“即时”回调——只要 Compose 重组并完成布局（measure/layout 阶段），就会立即触发。它们 没有内置的“等尺寸变化结束再回调”机制，因为 Compose 本身是声明式的，不存在传统 View 系统中“动画过程中不断回调”的概念。

如果想避免在尺寸频繁变化过程中（如动画、折叠展开）多次回调，只在“稳定”或“最终尺寸”确定后再处理。

以下是几种实用的解决方案：

使用 LaunchedEffect + Debounce（防抖）

这是最常用且推荐的方式。

通过防抖（debounce）延迟处理，如果在短时间内尺寸再次变化，就取消之前的处理。

@Composable
fun MyComponent() {
    var currentSize by remember { mutableStateOf(IntSize.Zero) }
    val scope = rememberCoroutineScope()
    val debounceJob = remember { mutableStateOf<Job?>(null) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp) // 示例：高度可能变化
            .onSizeChanged { width, height ->
                val newSize = IntSize(width, height)
                if (newSize != currentSize) {
                    currentSize = newSize

                    // 防抖：50ms 内无新变化才执行
                    debounceJob.value?.cancel()
                    debounceJob.value = scope.launch {
                        delay(50) // 可根据动画时长调整，如 100~300ms
                        // 此时尺寸已“稳定”
                        println("Final size: $currentSize")
                        // 在这里执行你的逻辑
                    }
                }
            }
    ) {
        // 内容
    }

    // 清理
    DisposableEffect(Unit) {
        onDispose {
            debounceJob.value?.cancel()
        }
    }
}

优缺点：

优点：简单、通用，适用于动画、折叠面板、软键盘弹出等场景。
注意：delay 时间应略大于你预期的最大连续变化间隔（如动画持续时间）。

结合 状态驱动 + 动画结束监听

如果你的尺寸变化是由 明确的状态切换（如展开/收起）引起的，并且使用了 Compose 动画（如 animateDpAsState），可以在动画结束后回调。

var isExpanded by remember { mutableStateOf(false) }
val height by animateDpAsState(
    targetValue = if (isExpanded) 200.dp else 100.dp,
    animationSpec = tween(durationMillis = 300),
    finishedListener = { 
        // ✅ 动画结束后回调！
        println("Animation finished, final height = $height")
    }
)

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(height)
        .onSizeChanged { w, h ->
            // 这里仍会多次回调，但你可以忽略它，
            // 而依赖 finishedListener 获取“结束”信号
        }
)

✅ 适用场景：尺寸变化由可控状态驱动，且使用了 Compose 动画 API。

使用snapshotFlow + debounce

如果你熟悉 Kotlin Flow，可以用 snapshotFlow 监听 IntSize 变化并防抖：

@Composable
fun MyComponent() {
    var size by remember { mutableStateOf(IntSize.Zero) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .onSizeChanged { w, h -> size = IntSize(w, h) }
    )

    LaunchedEffect(size) {
        snapshotFlow { size }
            .debounce(50) // 来自 kotlinx.coroutines.flow
            .collect { finalSize ->
                println("Debounced final size: $finalSize")
                // 处理最终尺寸
            }
    }
}

需要导入：

import kotlinx.coroutines.flow.debounce

总结建议

场景	推荐方案
通用防抖（软键盘、动态内容等）	onSizeChanged + delay 防抖
尺寸由状态动画驱动	animateXxxAsState + finishedListener
喜欢响应式编程	snapshotFlow + debounce

最佳实践：

大多数情况下，方案一（防抖）是最简单可靠的，延迟 50~100ms 通常足够覆盖连续变化。