首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在每个列表项都是WKWebView的情况下在SwiftUI中创建一个列表视图(我的实现速度非常慢,而且有问题)

在SwiftUI中创建一个列表视图,其中每个列表项都是WKWebView,可以按照以下步骤进行:

步骤1:导入必要的库 在代码文件的顶部,导入WebKit库,以便使用WKWebView。

代码语言:txt
复制
import SwiftUI
import WebKit

步骤2:创建一个自定义视图 创建一个自定义视图,该视图将包含WKWebView,并实现UIViewRepresentable协议。

代码语言:txt
复制
struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

在上面的代码中,我们定义了一个名为WebView的结构体,实现了UIViewRepresentable协议。该结构体包含一个URL属性,用于加载网页。

在makeUIView方法中,我们创建了一个WKWebView实例,并返回它作为UIView。

在updateUIView方法中,我们使用传入的URL创建一个URLRequest,并使用load方法加载网页。

步骤3:在列表视图中使用自定义视图 在你的列表视图中,使用ForEach循环来创建多个列表项,并在每个列表项中使用自定义的WebView视图。

代码语言:txt
复制
struct ContentView: View {
    let urls: [URL] = [
        URL(string: "https://www.example1.com")!,
        URL(string: "https://www.example2.com")!,
        URL(string: "https://www.example3.com")!
    ]
    
    var body: some View {
        List {
            ForEach(urls, id: \.self) { url in
                WebView(url: url)
                    .frame(height: 200) // 设置WebView的高度
            }
        }
    }
}

在上面的代码中,我们创建了一个名为ContentView的视图,并定义了一个包含多个URL的数组。在List中,我们使用ForEach循环遍历URL数组,并在每个列表项中使用自定义的WebView视图。我们还可以使用.frame来设置WebView的高度。

这样,你就可以在SwiftUI中创建一个列表视图,其中每个列表项都是WKWebView了。

请注意,由于WKWebView是UIKit的一部分,而SwiftUI是基于UIKit的,因此在使用WKWebView时可能会遇到一些性能问题。如果你的实现速度非常慢或有其他问题,可能需要进一步优化代码或考虑使用其他替代方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ask Apple 2022 与 SwiftUI 有关问答(下)

阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始滚动视图Q:如何实现一个在底部对齐滚动视图,在 macOS 上会不会有糟糕性能?...采用了常见解决方案,即旋转滚动视图和里面的每个单元格,以获得预期倒置列表,在 iOS 上,这很有效。但在 macOS 上,它使 CPU 使用率保持在 100%。...Swiftcord[12] 代码展示了如何在 SwiftUI实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...macOS APIQ:对于运行 Monterey Mac,能否如何在 SwiftUI 实现下面需求建议:打开一个窗口在该窗口中初始化数据找到所有打开窗口确定一个窗口是否打开从不在该窗口视图中关闭一个窗口...连锁动画Q:在 SwiftUI ,如何实现连锁动画?例如,想先给一个视图做动画,当动画完成后立即启动另一个动画。A:不幸是,目前不可能实现连锁动画。

14.8K30

如何让 SwiftUI 列表变得更加灵活

为了演示这种情况,我们在 List 嵌套一个 ForEach (因为在 SwiftUI 列表变化一版都是由 ForEach 触发不是由 List 触发)。...然后,让我们使用另一个新功能,集合元素绑定,让系统自动为我们 articles 数组每个元素创建一个可变绑定: struct ArticleList: View { @ObservedObject...由于每个 article 值在 ForEach 闭包中都是可变,我们可以使用新 swipeActions 修饰符来实现每个 NavigationLink 项目视图自定义滑动操作。...下拉刷新 就个人而言,下拉刷新在 SwiftUI 功能请求列表非常重要,所以我很高兴看到今年版本增加了对这种非常常见 UI 范式内置支持。...可定制分隔符 自从引入 SwiftUI 以来,开发者们有一个非常普遍要求,提供一个 API ,用于隐藏或以其他自定义实现列表每个 item 之间默认分隔符。

4.9K41
  • 肘子 Swift 周报 #043| 记忆归档和唤醒

    前一期内容|全部周报列表 原创 如何在 SwiftUI 中平铺图片[3] Fatbobman( 东坡肘子 )[4] “这题我会!”。想,看到本文标题时,这恐怕是大多数人第一反应。...尽管图片平铺并非常用功能,但多数开发者仍能轻松掌握其实现方法。通过搜索引擎查询,几乎所有结果都指向同一解决方案 —— 使用 resizable 修饰符。...在本文中,我们将探讨两种不同图片平铺实现方式,并由此引申出一种在 SwiftUI 较少使用 Image 构建方法。...并针对开发者讲解了如何在自定义文本视图中集成 Writing Tools,如何控制 Writing Tools 行为,以及如何处理特定文本范围(代码块)等内容。...Donny Wals 在本文中剖析了此警告出现原因,并提供了多种实用解决方案,包括将捕获变量从 var 转换为 let、在闭包中使用显式捕获列表,以及在 Task 执行前创建常量捕获。

    8610

    Ask Apple 2022 与 SwiftUI 有关问答(上)

    是否有任何建议用来检测列表行选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...在使用 environmentObject 情况下,如何避免创建实例视图被重新计算Q:如何在避免重新计算顶层视图 body 情况下,在不同子树两个子视图之间共享状态( 例如 ObservableObject...SwiftUI 新手。问题是关于场景。几乎所有教程和示例代码库,只使用了一个 WindowGroup 场景,所有内容都嵌套在 ContentView 。...最近,注意到 SwiftUI 视图 onAppear 在意想不到时间启动,比如当 UITabBarController 被创建时,不是当视图本身出现时。...A:如果你在 iOS 上使用 UITextField 遇到性能问题,你可以尝试避免每个视图都是 UITextField ,默认渲染为 Text ,当文本被点击时动态切换为 UITextField 。

    12.2K20

    优化在 SwiftUI List 显示大数据集响应效率

    本文将通过一个优化列表视图案例,展现在 SwiftUI 查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...首先创建一个假设性需求: 一个可以展示数万条记录视图 从上个视图进入该视图时不应有明显延迟 可以一键到达数据顶部或底部且没有响应延迟 响应迟钝列表视图 通常会考虑采用如下步骤以实现上面的要求:...在 SwiftUI 应用代码,绝大多数视图标识都是通过结构性标识 (有关结构性标识内容可以参阅 ViewBuilder 研究(下) —— 从模仿中学习[4])来实现 —— 通过视图层次结构(视图树...虽然我们已经找到了导致进入列表视图卡顿原因,但如何在不影响效率情况下通过 scrollTo 来实现列表端点滚动呢?...生产中处理方式 本文为了演示 id 修饰符在 ForEach 异常状况以及问题排查思路,创建一个在生产环境几乎不可能使用范例。

    9.1K20

    庆幸果断放弃了SwiftUI:它还不够成熟

    这是一项很好技术,响应式方法非常适合许多典型基于视图需求,但对如何处理边缘情况,文档中非常缺乏相关说明。” “这是个好主意,但 SwiftUI 主要问题是完全不成熟。”...但在开始实现更复杂检查器视图时,特别是涉及带有 / 不带步进器或颜色选择器多个文本字段时,整个运行速度开始剧烈下降。...认真做了一番分析,并发现了几个问题。首先,由可选对象提供视图在每次重绘时都是在完全重新创建虽然通过缓存稍稍提升了性能表现,但实际体验仍然非常糟糕。...需要为每个上下文创建一个视图,这些视图同时又是其他视图「子视图」,然后把需要数据传递给特定视图。...但上图展示效果其实是在 AppKit 完成,因为SwiftUI 一直实现不了预期功能。大家应该注意到了,中间 SpriteKit 视图上有三个按钮(分别是 +、200% 和 -)。

    5K20

    小程序的当下和未来可能 | 崔红保在GMTC 深圳站演讲内容整理

    其实,通讯阻塞是业界普遍存在一个问题,不止小程序,react native、weex等同样存在通讯阻塞问题。只不过react native、weex视图层是原生渲染,小程序是web渲染。...继续以上述swipeaction为例,要实现列表项菜单跟手滑动,大致需经如下流程: 在UI视图上绑定 touch 事件(或 pan 事件) 当手势触发时, Native UI层将手势事件通过 Bridge..."item1 ~ item8" 8个列表项通过setData全部传输过去,实际上变化数据只有"item5 ~ item8"。..."item5 ~ item8"4个新增列表项传输过去,实现了setData传输量极简化 组件差量更新 下图是一个微博列表截图: [gmtc-24.png] 假设当前有200条微博,用户对某条微博点赞,...Android 端同层渲染可基于 加 chromium 内核扩展来实现,大致流程如下: 原生层创建一个原生组件(video) WebView 创建一个 节点并指定其类型为

    1.1K30

    SwiftUI TextField进阶——格式与校验

    本文为【SwiftUI 进阶】系列文章一篇,在本文中,将介绍如何在TextField实现如下功能: •屏蔽无效字符•判断录入内容是否满足特定条件•对录入文本实时格式化显示 textfieldDemo1...为什么不自己封装新实现 对于很多从UIKit转到SwiftUI开发者,当遇到SwiftUI官方API功能无法满足某些需求情况下,非常自然地会想通过UIViewRepresentable来封装自己实现...不利于判断用户是否录入新信息(更多信息可参阅如何在SwiftUI创建一个实时响应Form[10])。方案二允许不提供初始值,支持可选值。...•对其他修饰方法兼容性无论方案一还是方案二都满足了本文之前提出对官方API完全兼容,在没有损失情况下获得了其他功能提升。 总结 每个开发者都希望为用户提供一个高效、优雅交互环境。...SwiftUI创建一个实时响应Form: https://www.fatbobman.com/posts/swiftui-input-form/

    8.1K20

    AnyView 对 SwiftUI 性能影响

    前言AnyView 是一种类型擦除视图,对于 SwiftUI 容器包含异构视图非常方便。在这些情况下,你不需要指定视图层次结构中所有视图具体类型。...一个可能发生情况是无尽不同视图列表,呈现不同类型数据(例如聊天、活动动态等)。...这意味着,当列表发生更改时,我们实际上重新创建了整个列表。这也解释了为什么 AnyView 实现随着时间推移变慢 - 每次重绘时都需要从头开始创建更多内容。...总结总而言之,在这些情景(包含异构视图可滚动列表),最好为容器不同视图使用具体类型。这可能听起来更复杂一些,但实际上你可以使其更简单,不必过多地处理泛型。...例如,如果你有一个菜单,作为几个异构元素列表,在点击时显示不同导航目标,并且决定将这些视图包装为 AnyView,测量结果表明与使用其他方法相比,性能没有区别。

    12300

    Ask Apple 2022 与 Core Data 有关问答

    实现可实时切换同步状态,可参阅 实时切换 Core Data 云同步状态[5] 一文。...在 SwiftUI ,我们通常会使用 environment 为视图树注入视图上下文,一旦 loadPersistentStores 出现错误导致 container 无法正常创建,那么调用上下文注入将会失败...在设置,存储被保存到一个应用程序组目录,以允许从应用程序和扩展程序访问,所以我认为每个进程都将利用各自容器来访问它。...非常希望一个可靠具体示例,说明如何安全地清除历史数据以防止磁盘空间浪费。A:清除历史记录是由客户决定。通常,应用每年或每半年清除一次历史记录。...是否可以为共享数据创建单独 CKRecordZoneQ:一个基于文档应用程序。每个文档都是一个包含唯一 Core Data 存储包。

    2.8K20

    SwiftUI 与 Core Data —— 数据获取

    尽管在实践,如果能在确保不访问托管对象非线程安全属性前提下,在非创建托管对象线程持有托管对象并不会出现崩溃情况,但出于谨慎考虑,最终还是放弃了这种方式。...尽管会增加一点视图代码量,但这种方法无论从数据流处理还是线程安全角度来说几乎都是完美的。不过,最终让放弃上面所有尝试原因还是因为性能问题。...通过新创建一个可以使用 Mock 数据 FetchRequest ,实现SwiftUI 与 Core Data —— 问题[6] 一文中提出可测试、可预览、可模块化目标。...( State )实现类似的效果。...在下一篇文章,我们将探讨如何在 SwiftUI 安全地响应数据,如何避免因为数据意外丢失导致行为异常以及应用崩溃。希望本文能够对你有所帮助。

    4.6K30

    SwiftUI 与 Core Data —— 数据定义

    在今后文章我们将尝试用新思路来创建一个 SwiftUI + Core Data app,看看能否避免并改善之前一些问题。本文将首先探讨如何定义数据。...无需更改代码便可以适应不同框架( 纯 SwiftUI 驱动、TCA 或其他 Redux 框架 )所有的视图均可以实现在不使用任何 Core Data 代码情况下进行预览,并可对 Mock 数据进行动态响应...遗憾是,托管对象对于以值类型为主 SwiftUI 来说并不算友好,因此,不少开发者都会在视图中将托管对象实例转换成一个结构体实例以方便接下来操作( 如何在 Xcode 下预览含有 Core Data...如果没有 AnyConvertibleValueObservableObject ,开发者仅能对应用部分视图进行预览( 在不创建托管环境情况下 ),通过 AnyConvertibleValueObservableObject...我们将介绍如何在视图从 Core Data 获取数据操作这一过程实现与托管环境解耦,创建一个可以接受 Mock 数据自定义 FetchRequest 类型。

    2.4K40

    WKWebView

    默认情况下,Web视图会自动将出现在Web内容电话号码转换成电话链接。当电话链接被点击时,电话应用程序就会启动并拨打该号码。...网页视图后退列表,即之前访问过web页面的列表。 canGoBack。布尔值,指示后退列表是否有可被导航到后退项。 canGoForward。布尔值,指示后退列表是否有可被导航到前进项。...导航到后退列表后腿项。 - goForward。导航到后退列表前进项。 - goToBackForwardListItem:。导航到后退列表一个网页项,并将其设置为当前项。...显示加载进度条 我们可以通过监听WKWebViewestimatedProgress属性值来实现一个加载进度条,UIWebView只能是通过timer事件做一个加载进度条。...关于KVO,在之前文章iOS开发设计模式--观察者模式详述过。

    6K20

    SheetKit——SwiftUI模态视图扩展库

    开发SheetKit主要原因: •便于Deep link调用SwiftUI提供了onOpenURL方法让应用程序可以非常轻松响应Deep Link。但在实际使用情况并不如预期。...•模态视图集中管理SwiftUI通常采用.sheet来创建模态视图,对于简单应用来说,这种形式非常直观,但如果应用程序逻辑比较复杂、需要模态视图众多,则上述方式就会让代码显得十分混乱,不易整理。...因此,在此种情况下,通常我们会将所有的模态视图集中管理起来,统一调用。请参阅之前文章——在SwiftUI,根据需求弹出不同Sheet[3]。...更多信息请参阅如何在SwiftUI实现interactiveDismissDisabled[5] SheetKitinteractiveDismissDisabled为了兼容bottomSheet.../posts/swiftui-multiSheet/ [4] 源地址: https://github.com/fatbobman/SheetKit.git [5] 如何在SwiftUI实现interactiveDismissDisabled

    2.9K20

    @State 研究

    本文试图探讨并分析SwiftUI @State实现方式和运行特征;最后提供了一个有关扩展@State功能思路及例程。读者需要对SwiftUI响应式编程有基本概念。...研究意义何在 在去年底使用了SwiftUI写了第一个 iOS app 健康笔记,这是第一次接触响应式编程概念。在有了些基本认识和尝试后,深深被这种编程思路所打动。...不过,在使用也发现了一些奇怪问题发现在视图(View)数量达到一定程度,随着数据量增加,整个app响应有些开始迟钝,变得有粘滞感、不跟手。...不恰当使用,可能导致响应速度会随着数据量及View量增加大幅下降。通过一段时间研究和分析,打算用两篇文章来阐述这方面的问题,并尝试提供一个现阶段使用思路。...如何在满足单一数据源情况下最大限度享受SwiftUI优化便利?将在下一篇文章中进行进一步探讨。

    2.9K20

    SwiftUI 动画进阶 — Part 5:Canvas

    虽然不是所有的问题都得到了解决,但现在每个例子都能顺利运行。在文章最后,将指出找到一些解决方法。...一个简单 Canvas 简而言之,画布Canvas 是一个 SwiftUI 视图,它从一个渲染闭包获得绘制指令。与 SwiftUI API 大多数闭包不同,它不是一个视图生成器。...这是一个很长列表,可能会让人有点不知所措。然而,当我在更新Companion for SwiftUI app 时,确实不得不去浏览所有这些方法。这让有了一个整体想法。...- Animated Symbols 当我测试如果视图作为一个符号被解析为动画,会发生什么时,感到非常惊喜。...每一都被实现一个单独SwiftUI视图。叠加字符和用渐变绘图是由视图处理。当我们在画布上使用渐变时,起始/结束点或任何其他几何参数都是相对于整个画布

    2.7K10

    掌握 Android Compose:从基础到性能优化全面指南

    可以通过定义不同 Composable 函数来创建自定义列表项实现个性化 UI。...每个列表项都是通过调用 MessageItem 函数来创建。 MessageItem 函数定义了每个列表项布局,这里使用了 Row 和 Column 来组织文本和按钮。...下面,我们将通过一个具体例子来展示如何在 Compose 处理列表状态和事件。 示例:处理列表删除事件 假设我们有一个消息列表每个消息旁边都有一个删除按钮。...每个消息项都是通过调用 MessageItem 函数来创建,其中包括一个删除按钮处理逻辑。 MessageItem 函数接收一个 onDelete 函数作为参数,这个函数在删除按钮被点击时调用。...这种模式在处理复杂状态和性能关键应用中非常有用,可以显著减少不必要计算和提高应用响应速度。 4.3 列表性能优化技巧 在处理长列表和滚动视图时,性能优化尤为关键。

    6710

    苹果全新UI框架来了!可视化编程,自动化减少20%代码量

    来源:Github等 编辑:鹏飞 本文转自公众号:新智元 【导读】SwiftUI是为Apple平台创建用户界面的现代化框架,以前所未有的速度创建漂亮、动态应用程序。...SwiftUI通过4种方式,解决了上述问题: 用一个声明式UI结构,定义了布局外观和工作方式 更新UI预览会自动生成新Swift代码,反之,更改Swift代码也会更新UI预览 Swift任何绑定例如有效...人人都能编程 SwiftUI继承了Swift理念:每个人都可以编程。现在,一个全新用户界面系统诞生,有助于避免新开发人员遇到大量问题。...感受一下SwiftUI代码风格 ? Github一个repo整理了在WWDC 2019发布SwiftUI布局框架一些官方示例: SwiftUI Essentials 创建和组合视图: ?...创建列表和导航栏: ? 处理用户输入: ? Drawing and Animation 绘图路径和形状: ? 动画视图和过渡 ? App Design and Layout 复杂界面组合: ?

    5.4K20

    iOS新闻类App内容页技术探索

    WebView每个复杂UI呈现、扩展区每个独立模块,我们都称为一个 模块 或 组件 。 完整来看,整个内容页右侧(右滑)普遍为评论页。...通过 WKWebViewExtension 扩展修复原生WKWebView,结合 HybridPageKit WKWebView回收复用逻辑,极大程度上解决了原生WKWebView问题,起到了很好效果...遗留问题: 目前,在使用WKWebView过程,唯一未解决问题就是可靠、全面的白屏检测方案,从而支持WKWebView在任何情况Crash进行重载。...如何在页面合理处理WebView与扩展区多种View协同滚动,灵活扩展,并且支持下拉刷新、上拉加载等操作,不同新闻类App也有不同技术方案。 1....Web维度优化 WKWebView复用 : 通过WKWebView复用,极大缩短了WebView从创建到渲染结束时间。

    2.9K00
    领券