Compose 中使用 WebView

已于 2025-05-05 21:16:56 修改
阅读量1k 收藏 16
点赞数 24
分类专栏： Compose 文章标签： kotlin
于 2025-05-05 21:05:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wulong756273/article/details/147722721
版权

在 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
                )
                // 设置 WebViewClient
                webViewClient = 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.current
    
    AndroidView(
        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 // 启用JavaScript
                loadUrl(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 = this
                webViewClient = WebViewClient()
                loadUrl(url)
            }
        }
    )
}

使用注意事项

  1. 添加网络权限：在 AndroidManifest.xml 中添加：

    <uses-permission android:name="android.permission.INTERNET" />

  2. WebView 优化：

    settings.apply {
    javaScriptEnabled = true // 启用JS
    domStorageEnabled = true // 启用DOM存储
    cacheMode = WebSettings.LOAD_DEFAULT // 缓存模式
}

  3. 内存管理：在 Activity 的 onDestroy 中调用 WebView.destroy() 防止内存泄漏

  4. 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 WebViewAPI 简洁，易用功能较少简单 WebView 需求
Compose Browser导航控制方便较新，文档少需要构建浏览器应用
HTML Viewer轻量级仅支持简单 HTML显示静态内容

最佳实践建议

  1. 简单需求：使用 Accompanist WebView

  2. 构建浏览器应用：考虑 Compose Browser

  3. 仅显示内容：HTML Viewer 更轻量

  4. 自定义需求：回退到原生 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 = true
                    domStorageEnabled = true
                }
            }
        )
    }
    
    // 监听导航状态
    LaunchedEffect(navigator.canGoBack) {
        canGoBack = navigator.canGoBack
    }
}

这些第三方库可以大大简化在 Compose 中使用 WebView 的复杂度，推荐根据项目需求选择合适的解决方案。

Android Compose webView
qq_28673213的博客
06-26 1442
本文来源：BitCoder老师的视频翻译，感谢老师的指点，也分享给大家 废话不多说，直接上代码
如何在Compose跨平台中实现一个简易WebView
weixin_51235693的博客
01-12 2226
本文将详细介绍如何编写一个简易的WebView组件，以支持在Compose跨平台项目中展示Web页面。
在Jetpack Compose中使用WebView
weixin_51235693的博客
01-31 1558
WebView是我们在开发中经常会使用到的组件，我们可以用它来展示动态的Html页面。在Android的View体系中，我们可以直接在xml中添加WebView组件即可使用。但是在Jetpack Compose中，并没有可以直接使用的WebView组件。那么我们该如何在Compose中使用WebView呢？幸运的是，现在已经有一个成熟的第三方库可以提供这些能力的支持。它提供了一个可以直接在Compose中使用的WebView组件。这样，开发者就不需要自行去实现WebView的封装逻辑。
Jetpack Compose - WebView基础使用
weixin_51235693的博客
02-04 1405
WebView是我们在开发中经常会使用到的组件，我们可以用它来展示动态的Html页面。在Android的View体系中，我们可以直接在xml中添加WebView组件即可使用。但是在Jetpack Compose中，并没有可以直接使用的WebView组件。那么我们该如何在Compose中使用WebView呢？这篇文章将介绍如何在Jetpack Compose中使用WebView，并使用其基础功能。
Compose实现webView文件选择
LiePy的博客
07-15 1717
Android compose项目中使用webView实现选择文件上传
使用指南：Compose-WebView 开源项目详解
gitblog_01026的博客
09-12 460
使用指南：Compose-WebView 开源项目详解 compose-webview 项目地址: https://gitcode.com/gh_mirrors/co/compose-webview ...
使用Jetpack Compose集成WebView
江小白的博客
07-05 2885
在Android开发中，WebView是一个非常重要的组件，它可以用来显示网页或加载在线内容。然而，在Jetpack Compose（Google推出的新的UI工具包）中，目前没有内置的WebViewComposable。但不必担心，你可以使用AndroidView来包装传统的Android View并在Compose中使用它。在这篇文章中，我将演示如何在Jetpack Compose中使用WebView。
JetpackCompose从入门到实战学习笔记1—在compose中简单使用webview
u012556114的博客
11-19 855
在compose中简单使用webview
android Compose 实现 webView
GYBIN02的专栏
09-13 1233
请注意，使用原生的WebView可能会导致与Compose的交互和布局系统之间的一些冲突和限制。在某些情况下，您可能需要更多的定制化和与Compose的集成，这可能需要更多的工作。中，我们使用了一个工厂函数来创建原生的WebView实例，并对其进行一些设置。在这里，我们启用了JavaScript，并加载了指定的URL。在Compose中，目前还没有原生的WebView组件。来将传统的WebView集成到Compose中。的Compose函数，它接受一个URL作为参数。在这个示例中，我们创建了一个名为。
在Jetpack Compose中使用Accompanist WebView
weixin_51235693的博客
09-11 911
WebView是我们在开发中经常会使用到的组件，我们可以用它来展示动态的Html页面。在Android的View体系中，我们可以直接在xml中添加WebView组件即可使用。但是在Jetpack Compose中，并没有可以直接使用的WebView组件。那么我们该如何在Compose中使用WebView呢？
kotlin compose 实现 webView 加载视频，支持Webview 全屏及退出全屏
07-07
kotlin compose 实现 webView 加载视频，支持Webview 全屏及退出全屏； 资料是主要代码，配置操作：1. AndroidManifest 配置 android:hardwareAccelerated ="true" 2. 支持横竖屏旋转 android:windowSoftInputMode=...
Kotlin （compose）实现 webView 渲染视频，支持全屏；实现H5 返回时，一级一级返回
07-07
1. Kotlin 实现 webView 渲染视频，支持全屏；实现H5 返回时，一级一级返回； 2. 完整的demo，kotlin + compose ； 3. 打开H5时，可逐次返回，也可一次返回或关闭；
compose使用webview
01-16
### Jetpack Compose 中使用 WebView 的方法 在 Jetpack Compose 应用程序中集成 `WebView` 组件并非像传统 Android XML 布局那样直观，因为 Compose 并未直接提供原生的 `WebView` 支持。为了克服这一挑战，开发者...
kotlin中 热流 vs 冷流 的本质区别
琦琦的博客
05-01 943
问题回答这是热流吗？✅ 是，StateFlow是热流会立即发射吗？✅ 会，本身就是当前值，first()立即得到在 ViewModel 中调用 first() 有问题吗？✅ 没问题，因为 StateFlow 不会挂起observeXXX(position) 取不到会崩吗？⚠️ 如果 map 中没初始化该 position，会崩溃（建议改为 getOrPut）StateFlow 管状态，SharedFlow 管事件。特性LiveDataFlowStateFlow是否冷流❌。
Kotlin与Jetpack Compose的详细使用指南
缘来的精彩的博客
04-30 644
当前最佳实践推荐结合Kotlin 2.0协程和Compose 2.0版本使用，注意鸿蒙平台支持将于2025年5月正式开源。
Kotlin-解构声明
2302_77179144的博客
05-06 133
要让一个类的属性支持解构,我们只需添加约定的函数即可。在Kotlin中,我们可以自定义解构出来的结果,也就是定义。解构同样可以用在Lambda表达式中。如果我们不想用前面的参数,可以用。
Kotlin 中 List 和 MutableList 的区别
xingyu19911016的博客
05-06 187
Kotlin 集合框架的重要设计原则：通过接口分离只读（read - only）和可变（mutable）操作，以提高代码的安全性和可维护性。只读 —> 可变：使用。可变 —> 只读：使用。
拥抱 Kotlin Flow
ZLGSPACE的博客
04-30 1025
Kotlin Flow 是 Kotlin 协程生态中处理异步数据流的核心工具，它提供了一种声明式、轻量级且与协程深度集成的响应式编程模型。与传统的 RxJava 相比，Flow 更简洁、更易于维护，尤其在 Android 开发中已成为主流选择。本文将从基础概念到高级特性全面解析 Flow，结合实战案例帮助读者深入掌握这一强大工具。
Kotlin Lambda优化Android事件处理
最新发布
wykyl的专栏
05-06 377
在 Kotlin 中，Lambda 表达式为 Android 事件处理提供了更加简洁优雅的解决方案。通过合理使用 Lambda，可以显著减少模板代码，提升代码可读性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值