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 的复杂度,推荐根据项目需求选择合适的解决方案。
相关文章:
Compose 中使用 WebView
在 Jetpack Compose 中,我们可以使用 AndroidView 组件来集成传统的 Android WebView。以下是几种实现方式: 基础 WebView 实现 Composable fun WebViewScreen(url: String) {AndroidView(factory { context ->WebView(context).apply {// 设置布局…...
PyCharm 安装教程
## 简介 PyCharm 是由 JetBrains 公司开发的一款优秀的 Python 集成开发环境(IDE),提供了代码分析、图形化调试器、集成测试器和版本控制系统等功能。PyCharm 有两个版本: - **专业版(Professional)**&am…...
基于MATLAB的图像色彩识别项目,彩色图像矩阵识别
一、项目背景 在本次IP Lab项目中,我们模拟了游戏“Lego’s Life of George”的玩法。游戏要求玩家在屏幕短暂展示图像后,凭借记忆重建乐高结构。我们面临的任务是处理一系列存在各种缺陷的图像,像噪声干扰、旋转以及投影问题等,…...
springboot应用大批量导出excel产生oom处理措施实践(适用于poieasyexcel)
一、背景: 在某些信息管理场景中,存在大批量导出需求,例如一次性导出10~100w行excel数据,如果不做特殊的处理,很容易导致Out Of Memory,特别是堆内存溢出。 oom复现 例如修改IDEA运行配置,VM…...
OpenCV 第6课 图像处理之几何变换(透视)
1、透视变换 2、数学公式 3、透视变换矩阵的生成 4、图像变换函数 5、例程 1、透视变换 OpenCV中的透视变换是一种几何变换,用于将图像从一个平面映射到另一个平面。它通过4个对应点之间的映射关系来变换图像,使得变换后的图像看起来像从不同角度观看。透视变换常用于图像…...
SpringMVC 框架核心知识点详解与实战
文章目录 引言一、响应数据和结果视图1.1 开发环境搭建1.2 返回值类型1.3 转发与重定向1.4 响应 json 数据1.5 静态资源处理 二、SpringMVC 实现文件上传2.1 准备工作2.2 传统方式文件上传 三、SpringMVC 的异常处理3.1 异常处理思路3.2 实现异常处理 四、SpringMVC 框架中的拦…...
Web前端开发:Grid 布局(网格布局)
一、Grid 是什么? Grid(网格布局) 是 CSS 中一种二维布局系统,可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox(一维布局),Grid 更适合构建复杂的网页结构(比如仪表盘、…...
时间同步服务
时间同步:多主机协作工作时,各个主机的时间同步很重要,时间不一致会造成很多重要应用的故障,如:加密协议,日志,集群等,利用NTP(Network Time Protocol )协议使网络中的各个计算机 时间达到同步。目前NTP协议…...
全球化电商平台Azure云架构设计
业务需求: 支撑全球三大区域(北美/欧洲/亚洲)用户访问,延迟<100ms处理每秒50,000订单的峰值流量混合云架构整合本地ERP系统全年可用性99.99%满足GDPR和PCI DSS合规要求 建议在实施时使用Azure Landing Zone框架进行部署&…...
【SaaS多租架构】数据隔离与性能平衡
SaaS多租户架构:数据隔离与性能平衡 一、技术背景及发展二、技术特点:数据隔离与性能优化的双核心三、技术细节:实现路径与关键技术四、实际案例分析五、未来发展趋势结语一、技术背景及发展 多租户架构是云计算与SaaS(软件即服务)模式的核心技术,其核心目标是通过共享基…...
ARM介绍及其体系结构
目录 一、ARM介绍 (一)公司层面 (二)技术层面 (三)微处理器芯片或产品方面 二、ARM体系结构 (一)指令集 (二)寄存器组织 (三)存…...
3DGS-slam:splatam公式
配套讲解视频:https://www.bilibili.com/video/BV1ZgfBYdEpg/?spm_id_from333.1387.homepage.video_card.click&vd_sourced4c3e747c32049ddd90dcce17208f4e0 1、多维高斯分布公式: 对于多维(多变量)高斯分布,概率密度函数的…...
阿里云服务器深度科普:技术架构与未来图景
阿里云服务器深度科普:技术架构与未来图景 一、起源与演进:从虚拟化到云原生 阿里云服务器(Elastic Compute Service, ECS)诞生于阿里巴巴集团对云计算技术的早期探索。2009年,阿里云团队启动自主研发,…...
物联网之对接MQTT最佳实践
小伙伴们,你们好呀,我是老寇,跟我一起学习对接MQTT 安装EMQX 采用docker-compose一键式,启动!!! 还没有安装docker朋友,参考文章下面两篇文章 # Ubuntu20.04安装Docker # Cento…...
基于C++实现的深度学习(cnn/svm)分类器Demo
1. 项目简介 本项目是一个基于C实现的深度学习与传统机器学习结合的分类器Demo,主要流程为: 从CSV文件读取样本数据用卷积神经网络(CNN)进行特征提取用支持向量机(SVM)进行最终分类支持模型的保存与加载提…...
探寻适用工具:AI+3D 平台与工具的关键能力及选型考量 (AI+3D 产品经理笔记 S2E03)
引言:从技术光谱到落地选择的桥梁 在前两篇笔记中,我们首先(S2E01)宏观地探讨了 AI 生成 3D 技术兴起的驱动力、核心价值与面临的挑战,随后(S2E02)深入辨析了 Text-to-3D、Image-to-3D、NeRF 等…...
软考 系统架构设计师系列知识点 —— 黑盒测试与白盒测试(1)
本文内容参考: 黑盒测试和白盒测试详解-CSDN博客 软件测试中的各种覆盖(Coverage)详解-CSDN博客 特此致谢! 零、概述 黑盒测试又名为功能测试,主要目的是发现软件设计的需求或者是软件设计规格说明书中的错误缺陷。…...
配变运行检测:算法与实现逻辑
在现代电网系统中,配电变压器(简称配变)作为电力分配的关键设备,其运行状态的稳定与否直接关系到整个电网的供电质量和可靠性。配变运行检测通过实时监测和分析配变的各项运行参数,及时发现潜在故障隐患,为…...
brpc 安装及使用
介绍 brpc(Baidu Remote Procedure Call)是百度开源的一个高性能、通用的 RPC(远程过程调用)框架,其目标是让使用者能轻松构建高并发、分布式的应用程序。以下从多个方面详细介绍brpc: 核心特性 高性能 …...
ComfyUI学习笔记,案例四:inpaint
背景 ComfyUI学习笔记,案例四:inpaint,就是将一张图抠掉一块区域后还原,或者在一个图上重绘某个区域,感觉还是比较简单的。 它包含四个案例: inpaint_example,正向提示词 closeup photograph …...
【C++】智能指针RALL实现shared_ptr
个人主页 : zxctscl 专栏 【C】、 【C语言】、 【Linux】、 【数据结构】、 【算法】 如有转载请先通知 文章目录 1. 为什么需要智能指针?2. 内存泄漏2.1 什么是内存泄漏,内存泄漏的危害2.2 内存泄漏分类(了解)2.3 如何…...
利用迁移学习实现食物分类:基于PyTorch与ResNet18的实战案例
利用迁移学习实现食物分类:基于PyTorch与ResNet18的实战案例 在深度学习领域,训练一个高性能的模型往往需要大量的数据和计算资源。然而,通过迁移学习,我们能够巧妙地利用在大规模数据集上预训练好的模型,将其知识迁移…...
列日-巴斯通-列日:与VELO Senso TT+见证精彩时刻
近日,第111届列日-巴斯通-列日自行车赛落下帷幕,波加查毫无悬念地再度单飞夺冠。这场赛事不仅是速度与耐力的较量,更是装备与技术的完美结合。 在2025年第111届列日-巴斯通-列日自行车赛中,波加查以绝对优势再度单飞夺冠&a…...
C++笔记之委托
C++笔记之委托 code review! 文章目录 C++笔记之委托一、什么是委托?二、委托的常见应用场景2.1 事件委托(Event Delegation)2.2 C# 的委托类型(Delegate)2.3 对象组合中的委托(Design Delegation Pattern)三、C++ 委托模式示例四、委托的优点五、委托与23种设计模式的…...
Windows11 VS code 安装 Cline 调用 Github MCP 配置过程坑点汇总
背景 为了调研 MCP 在 windows 上如何使用本地的命令执行一些操作而实现自动化的过程,在 B 站视频的指导下,进行相应填坑过程,最终运行起来,并实现 github 自动化编程并提交代码的过程。 B 站 Cline 视频演示 Cline Cline 是一…...
SpringCloud多环境配置的一些问题
一、配置优先级(高到低) 命令行参数bootstrap.yaml/propertiesnacos配置config/applicaion.properties > config/applicaion.yml > config/applicaion.yamlapplicaion.properties > applicaion.yml > applicaion.yaml 有环境配置的会覆盖基础配置5的重复项&#…...
多语言笔记系列:Polyglot Notebooks 中运行 BenchmarkDotnet 基准测试
运行 BenchmarkDotnet 基准测试 在多语言笔记中,可以很方便的使用 BenchmarkDotnet 进行基准测试。 使用步骤 1. 安装 BenchmarkDotNet 包 // 默认包源 #i "nuget:https://api.nuget.org/v3/index.json"#r "nuget: BenchmarkDotNet, 0.13.12&quo…...
Model Context Protocol (MCP)笔记
目录 摘要MCP理论MCP的作用MCP 传输机制 Stdio 与 SSESTDIOSSE 传输部署模式 模型是如何确定工具的选用的?Fc x MCP x LangChain MCP快速开始编写客户端基于golang的mcp 摘要 Model Context Protocol(MCP,模型上下文协议)是由 An…...
【codeforces 2070c】二分答案详解
【codeforces 2070c】二分答案详解 二分答案转化成判定 对于任何问题,如果我们有了一个判定算法,那把解空间枚举并判定一遍,当然就可以得到解了。而当解空间具有单调性时,我们就可以使用二分法代替枚举。 考虑如下问题…...
启发式算法-禁忌搜索算法
禁忌搜索是一种可以用于解决组合优化问题的启发式算法,通过引入记忆机制跳出局部最优,避免重复搜索。该算法从一个初始解开始,通过邻域搜索策略来寻找当前解的邻域解,并在邻域解中选择一个最优解作为下一次迭代的当前解࿰…...
simulink 外循环与内循环执行流程
目录 前言 一、外循环 模型 执行流程 二、内循环 模型 执行流程 仓库 前言 某些需求需要使用到simulink外循环和内循环,本篇通过对其执行顺序进行记录,以便后续查阅。 一、外循环 模型 下面是我搭建的简单模型 执行流程 0-step:执行en step…...
Gradio全解20——Streaming:流式传输的多媒体应用(6)——构建视频流目标检测系统
Gradio全解20——Streaming:流式传输的多媒体应用(6)——构建视频流目标检测系统 本篇摘要20. Streaming:流式传输的多媒体应用20.6 RT-DETR模型构建视频流目标检测系统20.6.1 RT-DETR模型1. 模型介绍2. 使用示例 20.6.2 系统配置…...
比较两种判断相同二叉树的方法:递归与遍历序列对比
在二叉树操作中,判断两棵树是否相同是一个常见的问题。本文将对比两种不同的解决方案:递归法和遍历序列对比法,分析它们的优缺点,并探讨为何递归法是更优的选择。 问题描述 给定两棵二叉树的根节点 p 和 q,判断它们是…...
Java IO流核心处理方式详解
一、IO流概述 Java IO(Input/Output)流是处理输入输出操作的核心机制,通过流(Stream)的形式实现设备间的数据传输。所有操作都基于以下两个核心抽象: InputStream/OutputStream:字节流基类 Re…...
C++竞赛指南
关注支持,好运连连 目录 关注支持,好运连连 一、竞赛C核心优势 二、必备语法与STL组件 1. 输入输出优化 2. 常用STL容器 3. 算法函数 三、竞赛常用算法 1. 时间复杂度分析 2. 高频算法模板 二分查找 快速幂(模运算) …...
Python字符串全面指南:从基础到高级操作
字符串是Python编程中最基础也是最重要的数据类型之一。本文将全面介绍Python字符串的相关知识,从基础概念到高级操作,帮助您彻底掌握字符串的使用。 1. 字符串基础 1.1 字符串的概念 字符串是由一系列字符组成的不可变序列容器,存储的是字…...
【推荐】智慧矿山矿业信息化智能化资料汇总-共25份
智慧矿山矿业信息化智能化资料汇总 25 份: 有色金属矿山智能化采选生产线智能矿山建设与示范智能矿山建设实践与思考智慧矿山建设解决方案与实现途径以信息化、智能化为手段打造生态型、效益型国际一流示范矿山新型智能 X 荧光多通道高精度在线品位分析仪的研制与应…...
Oracle OCP认证考试考点详解083系列08
题记: 本系列主要讲解Oracle OCP认证考试考点(题目),适用于19C/21C,跟着学OCP考试必过。 36. 第36题: 题目 解析及答案: 关于数据库闪回(FLASHBACK DATABASE)功能,以下…...
备战蓝桥杯国赛第一天-atcoder-beginner-contest404
B. 因为只有四种情况,旋转90/180/270度后替换,直接替换,暴力即可 C. 循环图的定义是每个点出度为2,而且只有一个环的,所以先判断出度,再判断是否成环 #include <bits/stdc.h> using namespace st…...
Python异步编程进阶:深入探索asyncio高级特性
异步上下文管理器 (async with) 异步上下文管理器允许你在异步环境中管理资源,比如数据库连接或文件操作。 基本实现 class AsyncDatabaseConnection:async def __aenter__(self):print("建立数据库连接")await asyncio.sleep(0.5) # 模拟连接建立return selfas…...
【Java ee初阶】多线程(7)
一、线程池 线程池的一些参数: corePoolSize:核心线程数量 maximumPoolSize:核心线程数量临时线程数量 上述是“java 的线程池策略”(其他语言,其他库的线程池可能不同) keepAliveTime :临时线程的存活时间.临时线程…...
【PostgreSQL数据分析实战:从数据清洗到可视化全流程】6.2 预测分析基础(线性回归/逻辑回归实现)
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 PostgreSQL数据分析实战:预测分析基础(线性回归/逻辑回归实现)6.2 预测分析基础——线性回归与逻辑回归实现6.2.1 预测分析核心理论框架1…...
【NLP】29. 高效训练与替代模型:让语言模型更轻、更快、更强
高效训练与替代模型:让语言模型更轻、更快、更强 本文介绍语言模型如何通过结构优化与新模型探索,提升训练和推理的效率,适应资源受限环境,同时概述了一些 Transformer 替代模型的最新进展。 一、如何让语言模型更高效?…...
【LaTeX+VSCode本地Win11编译教程】
LaTeXVSCode本地编译教程参考视频: LaTeXVSCode本地编译教程 下面提供一种Win11的Latex环境配置和设置方案,首先vscode安装参考博客:【VscodeGit教程】,然后准备安装Latex相关组件 在 https://miktex.org/download 下载 miktex 并…...
组合两个表 --- MySQL [Leetcode 题目详解]
目录 题目链接 往期相关基础内容讲解博客 题目详解 1. 题目内容 2. 解题思路 3. 代码编写 题目链接 // 175. 组合两个表 往期相关基础内容讲解博客 // 聚合查询和联合查询博客 题目详解 1. 题目内容 // 编写解决方案,报告 Person 表中每个人的姓、名、城市…...
STM32 PulseSensor心跳传感器驱动代码
STM32CubeMX中准备工作: 1、设置AD 通道 2、设置一个定时器中断,间隔时间2ms,我这里采用的是定时器7 3、代码优化01 PulseSensor.c文件 #include "main.h" #include "PulseSensor/PulseSensor.h"/******************…...
macOS 上是否有类似 WinRAR 的压缩软件?
对于习惯使用 Windows 的用户来说,WinRAR 是经典的压缩/解压工具,但 macOS 系统原生并不支持 RAR 格式的解压,更无法直接使用 WinRAR。不过,macOS 平台上有许多功能相似甚至更强大的替代工具,以下是一些推荐࿱…...
Java求职面试:Spring Boot与微服务的幽默探讨
Java求职者面试:技术与幽默的碰撞 场景概述 在某互联网大厂的面试现场,面试官严肃认真,程序员则是一个搞笑的水货角色。面试者名叫张伟,年龄28岁,硕士学历,拥有5年的Java开发经验。以下是面试的详细过程。…...
《数字图像处理(面向新工科的电工电子信息基础课程系列教材)》封面颜色空间一图的选图历程
禹晶、肖创柏、廖庆敏《数字图像处理(面向新工科的电工电子信息基础课程系列教材)》 学图像处理的都知道,彩色图像的颜色空间很多,而且又是三维,不同的角度有不同的视觉效果,MATLAB的图又有有box和没有box。…...
Docker 使用下 (二)
Docker 使用下 (二) 文章目录 Docker 使用下 (二)前言一、初识Docker1.1 、Docker概述1.2 、Docker的历史1.3 、Docker解决了什么问题1.4 、Docker 的优点1.5 、Docker的架构图 二、镜像三、容器四、数据卷4.1、数据卷的概念4.2 、…...