自定义带WebView的Collapsing Toolbar抖动问题求助

核心问题分析 #

你当前通过WebView滚动事件直接修改offset来联动TopAppBar的实现，会触发滚动事件循环冲突：WebView因offset上移时，系统会误判用户正在向上滚动，进而再次触发WebView滚动监听、更新offset，最终引发严重抖动。

可行解决方案：用Compose NestedScroll机制协调滚动 #

Compose的nestedScroll Modifier专为嵌套滚动场景设计，能让Toolbar和WebView有序处理滚动事件，从根源避免冲突。具体实现步骤如下：

1. 定义滚动状态与NestedScrollConnection #

创建滚动状态管理Toolbar偏移，同时实现NestedScrollConnection拦截并分配滚动事件：

val toolbarHeight = 56.dp // 自定义你的TopAppBar高度
val toolbarHeightPx = with(LocalDensity.current) { toolbarHeight.roundToPx() }
val scrollState = rememberScrollState(0)

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            // 优先处理向下滚动（展开Toolbar）
            val delta = available.y
            val newOffset = scrollState.value + delta.toInt()
            scrollState.scrollTo(newOffset.coerceIn(-toolbarHeightPx, 0))
            // 消费Toolbar滚动的部分，剩余事件传给WebView
            return Offset(0f, delta - (newOffset - scrollState.value))
        }

        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource
        ): Offset {
            // 处理向上滚动（收起Toolbar）
            val delta = available.y
            val newOffset = scrollState.value + delta.toInt()
            scrollState.scrollTo(newOffset.coerceIn(-toolbarHeightPx, 0))
            return Offset(0f, delta - (newOffset - scrollState.value))
        }
    }
}

2. 布局中应用NestedScroll与Offset #

用Box替代Column（避免Column布局特性带来的offset计算混乱），给WebView绑定nestedScroll，并基于scrollState设置组件偏移：

Box(Modifier.fillMaxSize()) {
    TopAppBar(
        modifier = Modifier
            .offset { IntOffset(0, scrollState.value) }
            .fillMaxWidth(),
        title = { Text("Collapsing Toolbar") }
        // 其他TopAppBar配置
    )

    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                loadUrl("https://example.com")
            }
        },
        modifier = Modifier
            .fillMaxSize()
            .offset { IntOffset(0, scrollState.value + toolbarHeightPx) }
            .nestedScroll(nestedScrollConnection)
    )
}

3. 关键逻辑说明 #

• NestedScrollConnection的作用：onPreScroll/onPostScroll先拦截滚动事件，优先完成Toolbar的展开/收起，剩余事件才传递给WebView，彻底避免offset变化导致的滚动误判。
• Box布局的优势：绝对定位特性更适合处理offset联动，避免Column自上而下布局带来的额外重排抖动。
• 滚动范围限制：通过coerceIn(-toolbarHeightPx, 0)确保Toolbar偏移不会超出自身高度，防止异常位移。

备选方案：优化WebView滚动监听逻辑 #

若不想使用NestedScroll机制，可在WebView滚动监听中加入方向判断与状态锁，过滤offset变化触发的重复滚动：

var lastScrollY = 0
var isToolbarAnimating = false
val toolbarHeightPx = with(LocalDensity.current) { 56.dp.roundToPx() }

WebView(
    onWebPageScrolled = { _, _, scrollY ->
        if (isToolbarAnimating) return@WebView
        val delta = scrollY - lastScrollY
        lastScrollY = scrollY

        val newOffset = state.toolbarOffsetHeightPx + delta
        state.toolbarOffsetHeightPx = newOffset.coerceIn(-toolbarHeightPx, 0)
        
        // 标记Toolbar动画状态，避免重复触发
        isToolbarAnimating = newOffset != state.toolbarOffsetHeightPx
        if (!isToolbarAnimating) lastScrollY = scrollY
    }
)

该方案稳定性弱于NestedScroll机制，仅作为临时替代方案推荐。

内容的提问来源于stack exchange，提问作者broken-cat