Jetpack Compose中如何实现HorizontalPager内WebView的回收复用？

首先需要纠正一个认知误区：Composable函数并非不会被销毁，当HorizontalPager的分页超出offscreenPageLimit指定的缓存范围时，对应分页的Composable会自动退出组合，生命周期回调会正常触发，你可以基于这个特性实现WebView的资源释放。

实现步骤 #

• 第一步：配置Pager离屏缓存阈值
  HorizontalPager的offscreenPageLimit参数和原生ViewPager的offscreenPageLimit逻辑完全一致，用于定义当前页两侧需要保留在组合中的分页数量，默认值为1，即仅保留当前页前后各1页，超出范围的分页会自动退出组合。你可以根据业务需求调整该参数值。
• 第二步：绑定WebView生命周期到分页组合生命周期
  通过DisposableEffect监听分页的组合退出事件，在回调中主动释放WebView的所有资源。

代码示例 #

分页WebView组件实现

import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun WebViewPage(
    url: String,
    modifier: Modifier = Modifier
) {
    // 初始化WebView实例
    val webView = remember {
        WebView(LocalContext.current).apply {
            settings.javaScriptEnabled = true
            loadUrl(url)
        }
    }

    // 监听组合生命周期，退出时销毁WebView资源
    DisposableEffect(Unit) {
        onDispose {
            webView.apply {
                stopLoading()
                // 解绑客户端避免泄漏
                webViewClient = WebViewClient()
                webChromeClient = WebChromeClient()
                // 加载空页面清理内容
                loadUrl("about:blank")
                // 清理历史记录和缓存
                clearHistory()
                clearCache(true)
                removeAllViews()
                // 最终销毁WebView
                destroy()
            }
        }
    }

    AndroidView(
        factory = { webView },
        modifier = modifier.fillMaxSize(),
        update = { /* 按需实现WebView更新逻辑 */ }
    )
}

HorizontalPager调用示例

import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState

@Composable
fun WebViewPager(pageList: List<PageItem>) {
    val pagerState = rememberPagerState(pageCount = { pageList.size })
    HorizontalPager(
        state = pagerState,
        // 配置离屏缓存页数，超出范围的分页会自动退出组合
        offscreenPageLimit = 1
    ) { pageIndex ->
        WebViewPage(url = pageList[pageIndex].url)
    }
}

// 分页数据结构示例
data class PageItem(val url: String)

注意事项 #

• 如果需要保留WebView的临时状态（如滚动位置、表单输入），可以在onDispose执行前将状态存储到ViewModel或rememberSaveable中，分页重新进入组合时再恢复状态即可。
• 不要使用ApplicationContext创建WebView，使用当前Composable关联的Activity上下文即可，避免引发内存泄漏。
• 如果需要自定义更精细的回收逻辑（不依赖默认的offscreenPageLimit规则），可以通过pagerState.currentPage监听当前页变化，计算当前分页索引和当前页的差值，超出阈值时主动触发WebView资源释放。

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