首页
学习
活动
专区
工具
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.7K30

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

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

4.8K41

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% 和 -)。

4.9K20

小程序的当下和未来可能 | 崔红保在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 创建一个 节点并指定其类型为

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/

8K20

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开发设计模式--观察者模式详述过。

5.9K20

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.6K10

苹果全新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.3K20

何在SwiftUI实现interactiveDismissDisabled

何在SwiftUI实现interactiveDismissDisabled 想获得更好阅读体验,可以访问我博客www.fatbobman.com[1] 本文中我们将探讨如何实现一个SwiftUI...去年9月,在文章【在SwiftUI制作可以控制取消手势Sheet】[3]中介绍了健康笔记2.0[4]版本Sheet控制实现方法。...这种实现所喜欢,也给了我很大启发。 在WWDC 2021 观后感[6]一文,我们已经探讨过SwiftUI3.0将会影响非常第三方开发者编写SwiftUI扩展思路和实现方式。...默认情况下,展示(present)Sheet视图控制器(UIViewController)是没有设置委托。因此,只要将定义好委托实例在视图中注入给特定视图控制器即可实现以上需求。...delegate = delegate } }} makeUIView只需要创建一个视图(UIView),由于在执行makeUIView时,无法保证Sheet视图已经被正常展示

3.8K40

何在Xcode下预览含有Core Data元素SwiftUI视图

何在Xcode下预览含有Core Data元素SwiftUI视图SwiftUI诞生之日起,预览(Canvas Preview )一直是个让开发者又爱又恨功能。...结合两年来SwiftUI中使用Core Data经验和教训,我们将在本文中探讨: •导致SwiftUI预览崩溃部分原因•如何在之后开发避免类似的崩溃出现•如何在Xcode安全可靠地预览含有...忘记注入上下文 含有Core Data元素视图预览崩溃情况相当比例都是由于忘记在环境值中注入持久化存储上下文(NSManagedObjectContext)导致。...此种情况下,通常我们会在模拟器删除App,重新安装运行即可解决问题。由于预览也是模拟器,在它沙盒中同样可能出现类似的问题。可以使用上文中关于预览模拟器修复方法来尝试解决。...在完成了各种处理CoreData数据方法后,通常会创建一些非常简陋视图或Unit Test来验证代码以及创建测试数据集。这样在进行UI开发时候,已经可以有一个可用来演示数据库文件了。

5.1K10

SwiftUI 之 HStack 和 VStack 切换

虽然可以在 LoginActionsView 中放入该逻辑,但我们希望以后能复用代码,因此需要重新创建一个专门视图,作为一个独立组件来实现动态堆栈切换逻辑。...虽然我们也有很多方法能解决这些问题(例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度和高度技术),但真正问题是当我们要动态的确定方向时,测量可用空间是否是一个方法。...使用布局协议 虽然我们最后已经用了非常解决方案,可以在所有支持 SwiftUI iOS 版本中使用,但也让我们来探索一下在 iOS 16 引入一些新布局工具(在写这篇文章时,它作为...Xcode 14 一部分仍在测试阶段) 其中一个工具是新 Layout 协议,它既能让我们创建完整自定义布局,直接集成到 SwiftUI 布局系统,同时也提供给我们一种更丝滑更动画方式在各种布局之间动态切换...就像字面意思一样,这种新容器将会在我们初始化时传递候选列表,基于当前上下文挑选出最优视图

2.8K10

【Android从零单排系列四十六】《Android自定义ListView实现方法》

二  ListView缺点 ListView 在 Android 一个经典列表控件,但也存在一些限制和缺点,包括: 性能问题:ListView 对于大量数据展示可能存在性能问题,特别是当列表项变得复杂或包含大量视图元素时...这可能导致滚动卡顿或列表加载速度。 有限布局灵活性:默认情况下,ListView 每个列表项使用相同布局结构。...固定高度限制:ListView 默认情况下要求每个列表项具有相同高度,这限制了列表项灵活性。如果列表项高度不同,需要重写适配器来处理不同高度情况。...接下来,创建一个名为 list_item.xml 布局文件,用于定义每个列表项外观。例如,我们可以在布局中放置一个 TextView 来显示文本: <!...运行应用程序后,您将看到一个显示列表项自定义列表视图。 通过在 CustomAdapter 类添加更多逻辑和布局定义,您可以根据需求定制每个列表项外观和功能。

27820
领券