Compose 中使用 WebView
在 Jetpack Compose 中，我们可以使用 AndroidView 组件来集成传统的 Android WebView。以下是几种实现方式：
基础 WebView 实现
@Composable
fun WebViewScreen(url: String) {AndroidView(factory = { context ->WebView(context).apply {// 设置布局参数layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT)// 设置 WebViewClientwebViewClient = WebViewClient()// 加载网址loadUrl(url)}})
}增强版 WebView（带更多控制）
@Composable
fun EnhancedWebView(url: String,modifier: Modifier = Modifier,onPageStarted: (String?) -> Unit = {}, // 页面开始加载回调onPageFinished: (String?) -> Unit = {}, // 页面加载完成回调onError: (WebResourceError?) -> Unit = {}, // 加载错误回调onProgressChanged: (Int) -> Unit = {} // 加载进度变化回调
) {val context = LocalContext.currentAndroidView(modifier = modifier,factory = { ctx ->WebView(ctx).apply {webViewClient = object : WebViewClient() {override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {onPageStarted(url)}override fun onPageFinished(view: WebView?, url: String?) {onPageFinished(url)}override fun onReceivedError(view: WebView?,errorCode: Int,description: String?,failingUrl: String?) {onError(WebResourceError(errorCode, description ?: ""))}}webChromeClient = object : WebChromeClient() {override fun onProgressChanged(view: WebView?, newProgress: Int) {onProgressChanged(newProgress)}}settings.javaScriptEnabled = true // 启用JavaScriptloadUrl(url)}})
}带有返回按钮控制的 WebView
@Composable
fun WebViewWithBackHandler(url: String) {val webView = remember { mutableStateOf<WebView?>(null) }val context = LocalContext.current// 处理返回按钮BackHandler(enabled = webView.value?.canGoBack() == true) {webView.value?.goBack()}AndroidView(factory = { ctx ->WebView(ctx).apply {webView.value = thiswebViewClient = WebViewClient()loadUrl(url)}})
}使用注意事项
-
添加网络权限：在 AndroidManifest.xml 中添加：
<uses-permission android:name="android.permission.INTERNET" />
-
WebView 优化：
settings.apply {javaScriptEnabled = true // 启用JSdomStorageEnabled = true // 启用DOM存储cacheMode = WebSettings.LOAD_DEFAULT // 缓存模式 } -
内存管理：在 Activity 的 onDestroy 中调用 WebView.destroy() 防止内存泄漏
-
Compose 限制：由于 WebView 是传统 View，某些高级 Compose 功能可能无法直接应用
完整示例使用
@Composable
fun WebViewExample() {var url by remember { mutableStateOf("https://www.example.com") }var loadingProgress by remember { mutableStateOf(0) }var isLoading by remember { mutableStateOf(false) }Column(modifier = Modifier.fillMaxSize()) {// 加载进度条if (isLoading) {LinearProgressIndicator(progress = loadingProgress / 100f,modifier = Modifier.fillMaxWidth())}// WebView 组件EnhancedWebView(url = url,modifier = Modifier.weight(1f),onPageStarted = { isLoading = true },onPageFinished = { isLoading = false },onProgressChanged = { loadingProgress = it },onError = { error -> Toast.makeText(context, "加载错误: ${error.description}", Toast.LENGTH_SHORT).show()})}
}这样就能在 Compose 应用中完整地集成和使用 WebView 了。
有第三方库支持
Compose 中使用 WebView 的第三方库
在 Jetpack Compose 中，除了使用原生 AndroidView 集成 WebView 外，还有一些优秀的第三方库可以简化 WebView 的使用。以下是几个常用的库：
1. Accompanist WebView (官方推荐)
Google Accompanist 提供的 WebView 库，目前最流行的选择。
添加依赖:
implementation "com.google.accompanist:accompanist-webview:0.34.0"
基本用法:
@Composable
fun WebViewSample() {val state = rememberWebViewState("https://example.com")WebView(state = state,modifier = Modifier.fillMaxSize(),onCreated = { webView ->webView.settings.javaScriptEnabled = true})
}特性:
-
内置状态管理 (rememberWebViewState)
-
支持导航历史
-
加载进度监听
-
与 Compose 生命周期完美集成
2. Compose WebView
另一个专门为 Compose 设计的 WebView 库。
添加依赖:
implementation "io.github.kevinnzou:compose-webview:1.6.0"
基本用法:
@Composable
fun WebViewExample() {val webView = rememberWebView()WebView(webView = webView,url = "https://example.com",modifier = Modifier.fillMaxSize(),onPageStarted = { url -> /* 页面开始加载 */ },onPageFinished = { url -> /* 页面加载完成 */ })
}特性:
-
更简洁的 API
-
支持 JavaScript 桥接
-
内置下载管理器支持
3. Compose Browser
功能更丰富的浏览器组件库。
添加依赖:
implementation "com.moriatsushi.compose:compose-browser:0.1.0"
高级用法:
@Composable
fun BrowserSample() {val controller = rememberBrowserController("https://example.com")Browser(controller = controller,modifier = Modifier.fillMaxSize(),onTitleChanged = { title -> /* 标题变化 */ },onUrlChanged = { url -> /* URL 变化 */ })// 控制导航Button(onClick = { controller.goBack() }) {Text("返回")}
}4. Compose HTML Viewer
如果只需要显示简单 HTML 内容(不需要完整 WebView 功能)
添加依赖:
implementation "com.github.jeziellago:compose-markdown:0.3.4"
显示 HTML:
@Composable
fun HtmlViewer() {val html = """<h1>标题</h1><p>这是一个段落</p>"""HtmlText(html = html, modifier = Modifier.padding(16.dp))
}综合比较
| 库名称 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Accompanist WebView | 官方维护，功能全面 | API 相对复杂 | 需要完整 WebView 功能 |
| Compose WebView | API 简洁，易用 | 功能较少 | 简单 WebView 需求 |
| Compose Browser | 导航控制方便 | 较新，文档少 | 需要构建浏览器应用 |
| HTML Viewer | 轻量级 | 仅支持简单 HTML | 显示静态内容 |
最佳实践建议
-
简单需求：使用 Accompanist WebView
-
构建浏览器应用：考虑 Compose Browser
-
仅显示内容：HTML Viewer 更轻量
-
自定义需求：回退到原生 AndroidView 实现
完整示例（使用 Accompanist）:
@Composable
fun FullFeaturedWebView() {var canGoBack by remember { mutableStateOf(false) }val state = rememberWebViewState("https://example.com")val navigator = rememberWebViewNavigator()Column(modifier = Modifier.fillMaxSize()) {// 顶部控制栏Row(verticalAlignment = Alignment.CenterVertically) {IconButton(onClick = { navigator.goBack() },enabled = canGoBack) {Icon(Icons.Default.ArrowBack, "返回")}Text(text = state.pageTitle ?: "加载中...",modifier = Modifier.weight(1f),maxLines = 1,overflow = TextOverflow.Ellipsis)CircularProgressIndicator(progress = state.loadingProgress / 100f,modifier = Modifier.size(24.dp))}// WebView 主体WebView(state = state,navigator = navigator,modifier = Modifier.weight(1f),onCreated = { webView ->webView.settings.apply {javaScriptEnabled = truedomStorageEnabled = true}})}// 监听导航状态LaunchedEffect(navigator.canGoBack) {canGoBack = navigator.canGoBack}
}这些第三方库可以大大简化在 Compose 中使用 WebView 的复杂度，推荐根据项目需求选择合适的解决方案。