如何在Jetpack Compose Navigation中保存WebView状态？

核心思路 #

单Activity架构下，Composable会随导航销毁重建，因此必须将WebView的状态托管到ViewModel（导航过程中ViewModel不会被销毁），结合WebView的状态API与Accompanist WebView的生命周期回调，实现状态的持久化与恢复。

1. 定义状态托管ViewModel #

创建专门的ViewModel保存WebView的历史栈、滚动位置及当前URL，避免状态随Composable销毁丢失：

import android.webkit.WebBackForwardList
import android.webkit.WebView
import androidx.lifecycle.ViewModel

class WebViewViewModel : ViewModel() {
    var webHistory: WebBackForwardList? = null
    var scrollX = 0
    var scrollY = 0
    var currentUrl: String? = null

    // 保存WebView状态
    fun saveState(webView: WebView) {
        webHistory = webView.copyBackForwardList()
        scrollX = webView.scrollX
        scrollY = webView.scrollY
        currentUrl = webView.url
    }

    // 恢复WebView状态
    fun restoreState(webView: WebView) {
        webHistory?.let {
            webView.restoreState(it)
            webView.scrollTo(scrollX, scrollY)
        } ?: run {
            currentUrl?.let { webView.loadUrl(it) }
        }
    }
}

2. 结合Accompanist WebView实现状态流转 #

在Composable中绑定ViewModel，利用WebView的创建、销毁回调完成状态的保存与恢复：

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.web.WebView
import com.google.accompanist.web.WebViewState
import com.google.accompanist.web.rememberWebViewState

@Composable
fun WebViewScreen(
    initialUrl: String,
    onNavigateBack: () -> Unit
) {
    val webViewModel: WebViewViewModel = viewModel()
    val webViewState = rememberWebViewState(url = webViewModel.currentUrl ?: initialUrl)
    val webView = remember { WebView(android.view.ViewGroup.LayoutParams.MATCH_PARENT) }

    // 首次加载或重建时恢复状态
    LaunchedEffect(Unit) {
        webViewModel.restoreState(webView)
    }

    WebView(
        state = webViewState,
        modifier = Modifier.fillMaxSize(),
        onCreated = { webViewInstance ->
            // 初始化WebView配置（示例：启用JavaScript）
            webViewInstance.settings.javaScriptEnabled = true
        },
        onDispose = { webViewInstance ->
            // 销毁前保存状态
            webViewModel.saveState(webViewInstance)
        },
        onBackPressed = {
            if (webView.canGoBack()) {
                webView.goBack()
            } else {
                onNavigateBack()
            }
        }
    )
}

3. 集成到Compose Navigation #

在导航图中注册WebView页面，确保同一目的地复用ViewModel：

import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable

fun NavGraphBuilder.webViewRoute(
    route: String,
    onNavigateBack: () -> Unit
) {
    composable(route = route) { backStackEntry ->
        val initialUrl = backStackEntry.arguments?.getString("url") ?: "https://example.com"
        WebViewScreen(initialUrl = initialUrl, onNavigateBack = onNavigateBack)
    }
}

关键注意事项 #

• ViewModel作用域：Compose Navigation中viewModel()默认绑定当前导航目的地的ViewModelStore，同一目的地导航时会复用ViewModel，保证状态不丢失。
• 状态备份方式：优先使用copyBackForwardList()复制历史栈，避免saveState()因序列化限制失效，配合滚动位置与URL实现完整恢复。
• 手动状态管理：Compose环境下WebView的生命周期由Composable管控，必须在onDispose和LaunchedEffect中手动处理状态流转，不能依赖系统自动恢复。

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