Android WebView在HorizontalPager中切换页面时闪烁问题求助

问题根源 #

你遇到的异常主要来自两个核心冲突：

• Compose的Modifier.height(300.dp)与WebView手动设置的MATCH_PARENT布局参数相互矛盾，切换页面时WebView会先按全屏高度渲染，再被Compose的约束强制修正，从而出现短暂增高和闪烁。
• update块会在每次重组时触发loadDataWithBaseURL，重复加载内容进一步加剧了闪烁现象。

修复方案 #

1. 移除WebView的手动LayoutParams设置 #

Compose的AndroidView会自动将Modifier的约束转换为View的布局参数，手动设置MATCH_PARENT会破坏这个自动适配逻辑，直接导致尺寸冲突。修改后的factory代码：

factory = { context ->
    WebView(context).apply {
        // 按需开启WebView基础设置，比如JS支持
        settings.javaScriptEnabled = true
    }
}

2. 限制update块的执行时机 #

只有当文章内容发生变化时才重新加载WebView内容，避免无意义的重复加载。可以通过View的tag标记或key参数实现：

AndroidView(
    factory = { context -> WebView(context) },
    update = { webView ->
        val htmlContent = "<!DOCTYPE html><html><head></head><body><h1 style=\"color: #000000;\">${article.title}</h1></body></html>"
        // 用tag记录已加载的内容，仅当内容变化时重新加载
        if (webView.tag != htmlContent) {
            webView.loadDataWithBaseURL(
                null,
                htmlContent,
                "text/html",
                "utf-8",
                null
            )
            webView.tag = htmlContent
        }
    },
    modifier = Modifier
        .fillMaxWidth()
        .height(300.dp),
    key = article.id // 可选：当article完全变更时重建WebView，适合内容差异大的场景
)

3. 优化HorizontalPager的预加载行为 #

调整Pager的预加载页数，减少非当前页面WebView提前渲染带来的资源竞争：

HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    offscreenLimit = 1 // 仅预加载前后1页，默认值为2
) { position ->
    // ... 原有页面逻辑
}

完整修复后的代码示例 #

HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    offscreenLimit = 1
) { position ->
    uiState.articles.getOrNull(position)?.let { article ->
        AndroidView(
            factory = { context ->
                WebView(context).apply {
                    settings.domStorageEnabled = true // 按需开启WebView存储设置
                }
            },
            update = { webView ->
                val htmlContent = "<!DOCTYPE html><html><head></head><body><h1 style=\"color: #000000;\">${article.title}</h1></body></html>"
                if (webView.tag != htmlContent) {
                    webView.loadDataWithBaseURL(
                        null,
                        htmlContent,
                        "text/html",
                        "utf-8",
                        null
                    )
                    webView.tag = htmlContent
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            key = article.id
        )
    }
}

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