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

不适用于SwiftUI中水平滚动视图内的列表的操作

在SwiftUI中,水平滚动视图(Horizontal Scroll View)是一种用于显示水平列表的视图容器。然而,由于SwiftUI的一些限制,目前无法直接在水平滚动视图内部实现列表操作。

列表操作通常包括添加、删除、移动和重新排序列表项等功能。在SwiftUI中,我们可以使用List视图来实现这些操作,但是List视图只能在垂直方向上滚动,无法直接嵌套在水平滚动视图中。

解决这个问题的一种方法是使用自定义的水平滚动列表视图(Custom Horizontal Scroll List View)。我们可以通过自定义视图来实现水平滚动效果,并在其中使用可交互的列表项来实现列表操作。

以下是一个简单的示例代码,展示了如何创建一个自定义的水平滚动列表视图:

代码语言:txt
复制
struct CustomHorizontalScrollListView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
        }
    }
}

在这个示例中,我们使用了ScrollView和HStack来创建一个水平滚动的视图容器。通过ForEach循环遍历items数组中的每个元素,并将其显示为可交互的列表项。

然而,需要注意的是,由于SwiftUI的限制,这种自定义的水平滚动列表视图可能无法实现一些高级的列表操作,例如拖拽重新排序、插入和删除列表项等。如果需要实现这些功能,可能需要使用其他技术或框架来辅助实现。

总结起来,目前在SwiftUI中,直接在水平滚动视图内实现列表操作是不可行的。但是我们可以通过自定义视图来模拟实现水平滚动列表,并在其中使用可交互的列表项。对于更复杂的列表操作,可能需要使用其他技术或框架来实现。

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

相关·内容

深入了解 SwiftUI 5 ScrollView 新功能

之前在 List 或 TextEditor 实现类似操作是十分困难。 默认 ContentMarginPlacement(.automatic)将导致指示器与内容之间长度不一致。...适用于作用域内所有可滚动容器。...可采用 优化在 SwiftUI List 显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定位置。...仅适用于 ScrollView 当 ForEach 数据源遵循 Identifiable 协议时,无需显式使用 id 修饰符设置标识 与 scrollTargetLayout 配合使用,可以获取当前滚动位置....automatic 是默认行为,在紧凑水平尺寸类受限,否则不受限。 .always 始终限制可滚动视图数量。 .never 不限制可滚动视图数量。

67620

SwiftUI 之 HStack 和 VStack 切换

前言 SwiftUI 各种堆栈是许多框架中最基本布局工具,能够让我们定义组视图,这些组视图可以按照水平、垂直或覆盖视图对齐。...举个例子,假如我们正在构建一个 app 其中包含 LoginActionsView ,一个让用户登录时在列表中选择操作类: struct LoginActionsView: View { .....在我们例子,LoginActionsView 不再只是水平方向排列,它现在也能移动到屏幕顶部。...为了观察当前水平方向尺寸,我们需要用到 SwiftUI 环境系统 — 通过在 DynamicStack 声明 @Environment - 标记属性(带有 horizontalSizeClass...就像字面意思一样,这种新容器将会在我们初始化时传递候选列表,基于当前上下文挑选出最优视图。

2.8K10

Java Swing JScrollPane -(滚动面板)

1 简介 支持水平和垂直滚动视图。文本区域、表格等需要显示较多数据而空间又有限时,通常使用 JScrollPane 进行包裹以实现滚动显示。 JScrollPane 内包含一个口 ?...表示 JScrollPane 显示区域。 口内包含一个需要滚动显示组件,称为视图。...构造方法 参数说明: view: 需要滚动显示视图组件 vsbPolicy: 垂直滚动显示策略 hsbPolicy: 水平滚动显示策略 ?...滚动显示策略取值: 用于设置垂直滚动条策略,以便在需要时垂直滚动条时,才会显示 ? 用于设置水平滚动条策略,以便在需要时水平滚动条时,才会显示 ?.../ 设置水平滚动显示策略 void setHorizontalScrollBarPolicy(int policy) // 是否响应鼠标滚动事件,默认响应 void setWheelScrollingEnabled

1.5K20

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

因此,如果你正在创建一个视图来显示可滚动内容,并可能进行选择操作,那么在 iOS 和 macOS 上使用 List 将有最好体验。...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...定制 ListQ:是否有办法以完全可定制方式使用 List ,这样我就可以实现删除缩进、分隔线,甚至更改整个列表背景等操作? 目前,我总是去找 LazyVStack 来代替。...,但原因并非来自实际图内容,而是由于 sheet、toolbar 等修饰器代码造成。...在 SwiftUI ,有一个从第一版开始就存在但尚未公开SwiftUI 实现滚动容器 —— _ScrollView 。

14.7K30

WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

苹果不仅带来了全新形态硬件产品,还推出了几个相当震撼新框架。本文将聊聊我对本届 WWDC SwiftUI 5.0 和 SwiftData 初步印象。...大幅改善了 ScrollView 控制力 本次升级,为 ScrollView 带来了新动态滚动定位系统( 不依赖 ScrollViewReader 和显式 id 声明)、一次性定位系统( 在视图进入后...,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 滚动到顶端子视图缩小视觉效果...中进行) 同样受到 CloudKit 同步限制,演示 Attribute(.unique) 并不适用于同步场景 目前功能比 Core Data 少,没有新增加 PersistentModel...开心还是无奈 在今年 WWDC ,苹果为 SwiftUI 带来了非常大变革,并推出了开发者向往已久 SwiftData。

35010

SwiftUI + Core Data App 内存占用优化之旅

尽管 SwiftUI 惰性容器以及 Core Data 都有各自内存占用优化机制,但随着应用视图内复杂( 图文混排 ),越来越多开发者遇到了内存占用巨大甚至由此导致 App 崩溃情况。...在我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用内存占用为 1.6 GB 左右。...无优化滚动至底截屏 从 Instruments 分析来看,随着列表滚动,内存占用持续增加。 无优化效果 相信任何开发者都无法容忍这种内存占用情况出现。...尽管从表面上来看,惰性容器仅会在视图进入可视区域时才会对其进行操作,但一旦该视图被显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图 body 值。...在本例,子视图 body 值中一定会包含用于显示图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图 body 值仍将占用不小内存。

1.2K10

零基础入门 23: UGUI ScrollView

父节点创建完毕以后,我们重新命个名,然后为他增加一个空Gameobject作为滚动图内父节点,并且选择一些布局方式,即Layout组件。...下一步,我修改滚动视图到合适大小,调试大小时候大家可以把mask标记打开,方便调整,然后调试好了以后再关闭。 ? 然后我们来修改一下滚动图内父节点大小。...因为这个父节点要装下我们滚动列表内容,所以width宽度我选择和滚动视图一样,而增加这个内容节点高即Height值 ? 接下来是为我们滚动视图增加要滚动显示子项了。...因为我们要创建是垂直,所以在ScrollRect组件上把水平滚动去掉。 ? 此时我们运行项目,来查看一下效果。顺便在运行,我又复制了几个图片,来穿插显示,这样更能体现出我们滚动视图显示。 ?...Rate:惯性减速系数 Scroll Sensitivity:滚动灵敏度 Viewport:口 Horizontal/Vertical ScrollBar:分别是水平和垂直滚动条 好了,掌握了今天内容

3K20

SwiftUI + Core Data App 内存占用优化之旅

尽管 SwiftUI 惰性容器以及 Core Data 都有各自内存占用优化机制,但随着应用视图内复杂( 图文混排 ),越来越多开发者遇到了内存占用巨大甚至由此导致 App 崩溃情况。...在我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用内存占用为 1.6 GB 左右。...图片 从 Instruments 分析来看,随着列表滚动,内存占用持续增加。 图片 相信任何开发者都无法容忍这种内存占用情况出现。下文中,我们将对这段代码进行逐步优化,以达到最终可用程度。...在本例,子视图 body 值中一定会包含用于显示图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图 body 值仍将占用不小内存。...估计与系统无暇进行清理操作有关。 图片 尽管上述优化技巧可能会对滚动流畅度产生一定影响( 视觉上不明显 ),不过考虑到它所带来巨大收益,在本例应该是一个相当不错选择。

2.4K40

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

本文将通过一个优化列表视图案例,展现在 SwiftUI 查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...创建数据集 通过 List 展示数据集 用 ScrollViewReader 对 List 进行包裹 给 List item 添加 id 标识,用于定位 通过 scrollTo 滚动到指定位置...,进入后列表滚动流畅且可无延迟响应滚动列表底部或顶部指令。...我们将通过 SwiftUI-Introspect[7] 来实现在 List 滚动列表两端。...升降序切换 对数据进行降序显示且仅允许使用者手工滚动列表。系统邮件、备忘录等应用均采用此种方式。

9.1K20

懒加载 React 长页面 - 动态渲染组件

Loading 组件是否在视图内 如图 1 所示,当 loading 组件位置滚动到视图中时,并且如果此时还有未渲染组件,这时便是渲染下一屏时机。...Element.clientHeight 元素内部高度,包含内边距,但不包括水平滚动条、边框和外边距。...Element.getBoundingClientRect() 方法返回元素大小及其相对于位置。...这意味着,在窗口滚动过程,我们反复更新了 compList 数据,从而导致了楼层组件重新渲染,而每个楼层组件数据请求,是放在组件内部,这与该楼层唯一标识 uuid 相关,因此导致数据接口重复请求...总结 React.memo 用于组件单位性能优化。 useCallback 根据依赖缓存第一个参数 callback ,多用于缓存函数。

3.4K20

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

是否有任何建议用来检测列表行选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...上文中提到带 primaryAction 参数 contextMenu 不仅可以用于 List ,而且也可以用于 Table。...场景内容视图定义了场景创建窗口中图内容,但场景本身定义了应用程序整体结构。SwiftUI 4.0 ,WindowGroup 获得了相当大更新,真正具备了开发 macOS 应用能力。...A:实现近似行为方法是在菜单中使用命令来提供相同操作。通常情况下,应该有列表让人们知道有哪些键盘快捷键可用。但是,如果这不适合你使用情况,我们会对这方面的增强请求反馈感兴趣。...ViewBuilder if 语句Q:我知道 SwiftUI 是基于 ResultBuilder 。所以 if 语句通过树状结构与 buildEither 进行操作

12.2K20

探讨 SwiftUI 几个关键属性包装器

在这篇文章,我们将探讨几个在 SwiftUI 开发中经常使用且至关重要属性包装器。本文旨在提供对这些属性包装器主要功能和使用注意事项概述,而非详尽使用指南。...@State @State 是 SwiftUI 中最常用属性包装器之一,主要用于在视图内部管理私有数据。它特别适合存储值类型数据,如字符串、整数、枚举或结构体实例。...@State 用于管理视图私有状态。 它主要用于存储值类型数据(与视图生命周期一致)。 典型应用场景 当需要因视图内数据变化而触发视图更新时,@State 是理想选择。...@State 不适用于存储大量数据或复杂数据模型,这种情况下更适合使用 @StateObject 或其他状态管理方案。 属性包装器本质上是一个结构体。...引入 @StateObject 意味着所有相关操作都在主线程上进行( SwiftUI 会隐式为视图添加 @MainActor),包括异步操作。应将需要在非主线程上运行代码应该从视图代码剥离。

18810

WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

苹果不仅带来了全新形态硬件产品,还推出了几个相当震撼新框架。本文将聊聊我对本届 WWDC SwiftUI 5.0 和 SwiftData 初步印象。...大幅改善了 ScrollView 控制力 本次升级,为 ScrollView 带来了新动态滚动定位系统( 不依赖 ScrollViewReader 和显式 id 声明)、一次性定位系统( 在视图进入后...,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 滚动到顶端子视图缩小视觉效果...中进行) 同样受到 CloudKit 同步限制,演示 Attribute(.unique) 并不适用于同步场景 目前功能比 Core Data 少,没有新增加 PersistentModel...开心还是无奈 在今年 WWDC ,苹果为 SwiftUI 带来了非常大变革,并推出了开发者向往已久 SwiftData。

1.1K20

在 Text 实现基于关键字搜索和定位

请阅读 优化在 SwiftUI List 显示大数据集响应效率[6] 以及 避免 SwiftUI 视图重复计算[7] 两篇文章,了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动...transcription 结果值已经为高亮显示值( 当前选择高亮位置 ),且下一个序号位置仍在同一个 transcription ,那么将放弃滚动。...我们需要采用如下方式避免因此而导致应用卡顿:确保搜索操作运行于后台线程过滤关键字响应,避免因为输入太快导致无效搜索操作我们通常会在 Combine 采用 .subscribe(on: ) 来设定之后...操作管道,以实现同样效果。...每周也会对当周博客上新文章以及在 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅 邮件列表[14],可以及时获得每周 Tips 汇总。

4.2K30

解析 SwiftUI 两处由状态更新滞后引发严重 Bug

原文发表在我博客 肘子Swift记事本视图变化在前、状态变化在后在 SwiftUI ,某些可编程控件在执行一定操作时,会先更新视图,待视图变化完成后再修改与其对应状态。...而通过调用环境值或直接修改绑定状态,SwiftUI 则遵循了响应式编程原则,进行了先调整状态,后更新视图操作。...它复现条件如下:iOS 16 系统,在真机或模拟器上测试点击视图列表按钮,可以进入下一级视图。...AttributeGraph 是 SwiftUI 用于维护众多数据源与视图之间依赖关系工具。...在我们遇到问题两个场景,应用程序都恰好使用了导航容器,并且通过特定操作,使 RunLoop 处于了适合 AG 打包更新状态。

588110

如何判断 ScrollView、List 是否正在滚动

比如在 SwipeCell[3] ,需要在可滚动组件开始滚动时,自动关闭已经打开侧滑菜单。遗憾是,SwiftUI 并没有提供这方面的 API 。...本文将介绍几种在 SwiftUI 获取当前滚动状态方法,每种方法都有各自优势和局限性。...iOS 系统在 macOS 下 eventTracking 模式,该方案表现并不理想屏幕只能有一个可滚动控件由于任意可滚动控件滚动时,都会导致主线程 Runloop 切换至 tracing...模式,因此无法有效地区分滚动是由那个控件造成方法三:PreferenceKey在 SwiftUI ,子视图可以通过 preference 视图修饰器向其祖先视图传递信息( PreferenceKey...判断准确度没有前两种方式高当可滚动组件内容出现了非滚动引起尺寸或位置变化( 例如 List 某个视图尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图变化结束后,状态会马上恢复到滚动结束滚动开始后

3.7K40

解析 SwiftUI 两处由状态更新滞后引发严重 Bug

视图变化在前、状态变化在后 在 SwiftUI ,某些可编程控件在执行一定操作时,会先更新视图,待视图变化完成后再修改与其对应状态。这些控件基本上都是对 UIkit(AppKit)二次包装。...而通过调用环境值或直接修改绑定状态,SwiftUI 则遵循了响应式编程原则,进行了先调整状态,后更新视图操作。...它复现条件如下: iOS 16 系统,在真机或模拟器上测试 点击视图列表按钮,可以进入下一级视图。...AttributeGraph 是 SwiftUI 用于维护众多数据源与视图之间依赖关系工具。...在我们遇到问题两个场景,应用程序都恰好使用了导航容器,并且通过特定操作,使 RunLoop 处于了适合 AG 打包更新状态。

26620

解析SwiftUI布局细节(一)

前言 ---- 在前面的文章谈了谈对SwiftUI基本认识,以及用我们最常见TB+NA方式搭建了一个很基本场景来帮助认识了一下SwiftUI,具体文章可以在SwiftUI分类部分查找...以前我们用UIKit写一个列表时候我们步骤可能是下面这样: 1、创建视图控制器 2、大概解析一下UI,该创建头部创建头部视图,该写CollectionViewCell或者...我们从一个具体实际页面开始梳理一下用SwiftUI实际写UI时候一些基本知识,就如我们Demo页面举例: ?...当然这个横向和纵向也是相对你手机屏幕是竖直还是水平,不是绝对,这个理解一下也容易!...我想加一个点击除了输入框之外收起键盘操作,我们具体实现方法其实就是在最底层添加了一个View,然后在它上面添加了点击手势,具体得我们看看代码: /// 定义一个常见背景View struct Background

2.3K10
领券