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

有没有办法避免SwiftUI GeometryReader阻止嵌套视图在列表中增长?

在SwiftUI中,可以使用GeometryReader来获取视图的几何信息,但是在列表中使用GeometryReader时,可能会导致嵌套视图无法正常增长。为了避免这个问题,可以使用PreferenceKey来解决。

PreferenceKey是一个协议,用于在视图层次结构中传递和聚合数据。通过定义一个PreferenceKey,可以在视图层次结构中传递和共享数据,并在需要时进行处理。

下面是一个示例代码,演示如何使用PreferenceKey来避免GeometryReader阻止嵌套视图在列表中增长:

代码语言:txt
复制
struct ContentView: View {
    @State private var itemHeights: [CGFloat] = []
    
    var body: some View {
        List {
            ForEach(0..<10) { index in
                GeometryReader { geometry in
                    Text("Item \(index)")
                        .frame(height: self.itemHeights[index])
                        .background(GeometryReader {
                            Color.clear
                                .preference(key: ItemHeightKey.self, value: geometry.size.height)
                        })
                }
                .onPreferenceChange(ItemHeightKey.self) { height in
                    self.itemHeights[index] = height
                }
            }
        }
    }
}

struct ItemHeightKey: PreferenceKey {
    static var defaultValue: [CGFloat] = []
    
    static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) {
        value.append(contentsOf: nextValue())
    }
}

在上面的代码中,我们创建了一个名为ItemHeightKey的PreferenceKey,用于存储每个项目的高度。在每个项目的GeometryReader中,我们将高度存储为Preference,并在onPreferenceChange中更新itemHeights数组。

通过这种方式,我们可以避免GeometryReader阻止嵌套视图在列表中增长。请注意,这只是一个示例代码,实际使用时可能需要根据具体情况进行调整。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB),腾讯云云原生容器服务(TKE)。

腾讯云产品介绍链接地址:

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

相关·内容

解析SwiftUI布局细节(二)循环轮播+复杂布局

如果你看了我们 Demo的代码,你就知道我们是采用 TabView 嵌套 NavigationView 的形式,在这样的模式下似乎是存在问题的, TabView+NavigationView 你利用...通过它我们可以避免初始 View 时创建 ObservableObject, 而是从环境获取 ObservableObject,像 @EnvironmentObject,@ObservedObject...GeometryReader 的主要作用就是能够获取到父View建议的尺寸,这就是它的主要作用,要没有它我们面临的可能就是无休止的传值了,SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的...有一个还得说明一下,GeometryReader 改变了它显示内容的方式。 iOS 13.5 ,内容放置方式为 .center。 iOS 14.0 则为:.topLeading。...3、再提一点关于上面说的滚动视图UIKit我们可以用UICollectionView搞定一切,但是SwiftUI没有这个控件,我建议采用的方式是 ScrollView + HStack + VStack

11.9K20

GeometryReader :好东西还是坏东西?

GeometryReaderSwiftUI 诞生之初就存在,它在许多场景扮演着重要的角色。然而,从一开始就有开发者对其持负面态度,认为应尽量避免使用。...一些复杂的布局场景,或者某些设备或系统版本,布局可能需要经过几轮的协商才能获得最终稳定的结果,尤其是当视图需要依赖 GeometryReader 提供的几何信息来重新确定自己的位置和尺寸时。...不过,大家是否想过,其实在很多场景GeometryReader 本来就并非最优解。与其说避免使用,到不如说用更加 SwiftUI 的方式来进行布局。...请阅读 用 SwiftUI 的方式进行布局[9] 和 SwiftUI 实现视图居中的若干种方法[10] 两篇文章,以了解面对同一个需求,SwiftUI 有多种布局手段。...里子和面子:不同的尺寸数据 SwiftUI ,有一些 modifier 是布局之后,渲染层面对视图进行的调整。

51570

SwiftUI 实现视图居中的若干种方法

欢迎大家 Discord 频道[2] 中进行更多地交流将某个视图视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。... SwiftUI ,有很多手段可以达成此目的。本文将介绍其中的一些方法,并对每种方法背后的实现原理、适用场景以及注意事项做以说明。...().fill(.clear)使用 SwiftUI 进行开发的过程,Color、Rectangle 等经常被用来实现对容器的等分操作。...我为本文这种通过多种方法来解决一个问题的方式添加了【小题大作】标签,目前使用该便签的文章还有: Core Data 查询和使用 count 的若干方法[6]、 SwiftUI 视图中打开 URL...每周也会对当周博客上的新文章以及 Twitter 上发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[10],可以及时获得每周的 Tips 汇总。

6.6K40

SwiftUI案例:天气

SwiftUI案例:天气 效果 目标 实现静态的仿iOS天气APP程序 文件与配置 外观配置 外观配置需要从 '代码' 中下载文件并提取对应的图片 需要配置 Assets.xcassets...文件 需要配置 SpriteFiles/Assets.xcassets 文件 动态图片导入 工作区的项目文件夹下创建名为 SpriteFiles 的 Group 并在其中依次导入...RainFall.sks RainFallLanding.sks 创建View视图 工作区的项目文件夹下创建名为 View 的 Group 并在其中依次创建 Home.swift CustomStackView.swift...CustomCorner.swift WeatherDataView.swift 视图文件 创建Model模板 工作区的项目文件夹下创建名为 Model 的 Group 并在其中创建 Forecast.swift...视图与模板实现 ContentView.swift 这是应用视图的总体框架布局,需要自适应屏幕尺寸 import SwiftUI struct ContentView: View { var

4.8K21

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

使用 environmentObject 的情况下,如何避免创建实例的视图被重新计算Q:如何在避免重新计算顶层视图 body 的情况下,不同子树的两个子视图之间共享状态( 例如 ObservableObject...我的例子,不拖动时从 0 到 75,拖动时从 0 到 100。有什么办法可以阻止这种情况吗?A:你可以用 .chartYScale(domain: 0 ... 75) 锁定 Y 轴的刻度域。... iOS 16 ,通过 presentationDetents 同 GeometryReader 的配合,可以创建与内容高度一致的 Sheet。此处查看 完整代码[9] 。...我是 SwiftUI 新手。我的问题是关于场景的。几乎所有教程和示例代码库,只使用了一个 WindowGroup 场景,所有内容都嵌套在 ContentView 。...构造函数初始化 @StateObjectQ:是否有办法视图中用该视图结构参数初始化一个 @StateObject ?A:可以通过 init 方法手动初始化 @StateObject 来实现。

12.2K20

SwiftUI 之 HStack 和 VStack 的切换

前言 SwiftUI 的各种堆栈是许多框架中最基本的布局工具,能够让我们定义组视图,这些组视图可以按照水平、垂直或覆盖视图对齐。...为了观察当前水平方向的尺寸,我们需要用到 SwiftUI 环境系统 — 通过 DynamicStack 声明 @Environment - 标记属性(带有 horizontalSizeClass...使用布局协议 虽然我们最后已经用了非常棒的解决方案,可以在所有支持 SwiftUI 的 iOS 版本中使用,但也让我们来探索一下 iOS 16 引入的一些新的布局工具(写这篇文章时,它作为...Xcode 14 的一部分仍在测试阶段) 其中一个工具是新的 Layout 协议,它既能让我们创建完整的自定义布局,直接集成到 SwiftUI 的布局系统,同时也提供给我们一种更丝滑更动画的方式各种布局之间动态切换...就像字面意思一样,这种新的容器将会在我们初始化时传递的候选列表,基于当前上下文挑选出最优视图

2.8K10

如何在 SwiftUI 创建条形图

系列文章 如何在 SwiftUI 创建条形图 SwiftUI 的水平条形图 iOS 16 中用 SwiftUI Charts 创建一个折线图 iOS16 中用 SwiftUI 图表定制一个线图... Swift 图表中使用 Foudation 库的测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好的。...以下列表数据被作为主视图的项目数据,每一条数据包含一个对(名称,值)。真正的 app 里,这里的数据应该通过 ViewModel 从 model 里取数据。...SwiftUI 组合矩形来创建条形图是比较容易的。...SwiftUI 是一个很好的平台,用于创建视图和快速重构独立的子视图 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多的定制化。

5.1K10

SwiftUI geometryGroup() 指南:从原理到实践

这是因为 SwiftUI ,每个可动画视图根据 transaction 的信息自行决定自身的动画行为。...视图几何信息发生变化时,不要同时视图中创建新的内容 如果一定要在变化时为子视图增加新元素( 比如上面基于 GeometryReader 的示例,可以将所需元素视图变化前便让其存在,通过透明度来调整其可见性...) 例如,较低版本的 SwiftUI ,我们可以修改上面的示例一的代码,以避免出现非预期的行为: struct TopLeadingTest2: View { let show: Bool...对于 iOS 16,文字变化较多且较大的情况下,应尽量避免视图几何信息调整时切换文字内容。 总结 本文中,我们深入探讨了 SwiftUI geometryGroup() 的重要性和实用性。...实际开发,尤其是面对复杂动画和布局的场景时,理解并正确使用 geometryGroup() 是至关重要的。 geometryGroup() 为我们提供了一个避免个别情况下出现布局异常的能力。

26010

使用 SwiftUI 创建一个灵活的选择器

前言 最近,我正在开发一个 Dribbble 上找到的设计的 SwiftUI 实现时,我想到了一个点子,可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。...使用 UIKit 时,我总是将这种类型的视图实现为具有特定 UICollectionViewFlowLayout 的 UICollectionView。但在 SwiftUI 该如何实现呢?...FlexiblePicker 视图 最后,当所有逻辑准备好后,我们需要实现一个视图主体。如我之前所提到的,视图将使用嵌套的 ForEach 循环创建。...此外, VStack 的底部,我们设置一个 frame,其中宽度取自 GeometryReader,高度则由先前创建的函数计算。 现在 FlexiblePicker 已经完成,可以使用了!...最后,提供了一个简单的视图实现,可以 SwiftUI 中使用该选择器。这个选择器可用于创建各种交互式选择界面。 - EOF -

25920

掌握 SwiftUI 的 Safe Area

UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保将视图放置界面的可见部分。 SwiftUI 对上述过程进行了彻底的简化。...本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。... SwiftUI ,开发者通常只有需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度时才会使用到 safeAreaInsets 。...使用 safeAreaInset 扩展安全区域 SwiftUI ,所有基于 UIScrollView 的组件(ScrollView、List、Form),默认情况下都会充满整个屏幕,但仍可确保我们可以安全区域内看到所有的内容...safeAreaInsetList2 遗憾的是, iOS 15 之前,SwiftUI 并没有提供调整视图安全区的手段,如果我们想通过 SwiftUI 的手段创建一个自定义 Tabbar 时,列表中最后的内容将被

7.5K31

SwiftUI 的方式进行布局

需求 不久前, 聊天室[3] ,有网友提出了这样一个布局需求: 有两个竖向排列的视图。...padding-offset 二、AlignmentGuide SwiftUI ,开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南的值( 设置显式值 )。...五、LayoutPriority SwiftUI ,设置视图优先级( 使用 layoutPriority )是一个好用但并不常用的功能。...视图二同理 六、再战 AlignmentGuide 在上面使用 AlignmentGuide 的例子,我们通过 GeometryReader 获取了视图二的高度信息,并通过设置显式对齐指南来完成了移动...VStack 的纵向需求尺寸为视图一与视图二的高度和,而通过 overlay 嵌套,纵向需求尺寸仅为视图二的高度( 尽管视觉上视图视图二的上方且紧密相连 )。

3.2K00

掌握 ViewThatFits

iOS 16 SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示,它的作用是在给定的多个视图中找出最合适的视图并使用。...理想尺寸( Ideal Size ) SwiftUI ,相较于建议尺寸,很多开发者对理想尺寸接触的较少,理解的也不太深入。... SwiftUI ,我们可以通过 fixedSize 来强制一个视图以理想尺寸进行呈现: struct IdealSizeDemo: View { var body: some View {... SwiftUI ,我们可以通过 frame 来修改视图在理想状态下的呈现。...因此,理解它的内部工作原理和限制是至关重要的,这样开发者才能充分利用它的优势,同时避免潜在的布局问题。 希望这篇文章能为你使用 SwiftUI 进行布局设计时提供有价值的见解。

17410

SwiftUI 的方式进行布局

需求 不久前, 聊天室 ,有网友提出了这样一个布局需求: 有两个竖向排列的视图。...图片 二、AlignmentGuide SwiftUI ,开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南的值( 设置显式值 )。...五、LayoutPriority SwiftUI ,设置视图优先级( 使用 layoutPriority )是一个好用但并不常用的功能。...视图二同理 六、再战 AlignmentGuide 在上面使用 AlignmentGuide 的例子,我们通过 GeometryReader 获取了视图二的高度信息,并通过设置显式对齐指南来完成了移动...VStack 的纵向需求尺寸为视图一与视图二的高度和,而通过 overlay 嵌套,纵向需求尺寸仅为视图二的高度( 尽管视觉上视图视图二的上方且紧密相连 )。

4.8K80

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

,只提取你需要的属性,并依靠 SwiftUI 的 equality 检查来提前中止无效计算苹果工程师给出的答案与 避免 SwiftUI 视图的重复计算[5] 一文的很多建议都一致。... SwiftUI 布局 —— 尺寸( 上 )[8] 一文,对建议尺寸的几种模式都进行了介绍。如何减少主线程的负担Q:如何避免所有操作都被放置主线上?... SwiftUI 4 ,可以使用 .scrollContentBackground(.hidden) 隐藏列表的默认背景searchableQ:是否有办法.searchable() 修饰器以编程方式设置搜索字段的焦点...但是,此转换仅在文本字段完成编辑时才会发生,并且不会阻止输入非数字字符。目前 SwiftUI 没有 API 可以限制用户字段输入的字符。...然而,两个内容相同的视图之间的交换并不能使视图顺利地产生动画,因为两者的文本也被动画化了。我正在使用仅禁用 TextField 的替代方法,但有没有办法引导动画以使用文档的方法?

14.7K30

深入了解 SwiftUI 5 ScrollView 的新功能

SwiftUI 5.0 ,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早的帮助到有需要的开发者。...可采用 优化 SwiftUI List 显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化 SwiftUI List 显示大数据集的响应效率[6] 一文所提到的,当数据集很大时,也会出现性能问题。....automatic 是默认行为,紧凑的水平尺寸类受限,否则不受限。 .always 始终限制可滚动视图的数量。 .never 不限制可滚动视图的数量。...总结 我完全没有想到, SwiftUI 5 ,苹果对 ScrollView 进行了全面增强。值得赞赏的是,他们不仅提供了一些一直期待的功能,而且 API 的设计和实现完成度上都非常出色。

72120

SwiftUI 布局协议 - Part2

但无论如何,我建议你监测 CPU 来发现布局其他潜在的问题。如果 CPU 开始飙升,或许可以 placeSubviews 添加一条打印语句查看它是否无休止的调用。注意动画也会使 CPU 增长。...过去我们使用 GeometryReader 获取视图尺寸并传递值到父视图的时候遇到过这个问题,然后父视图使用该信息去改变视图,即使用 GeometryReader 去再一次改变,然后我们就陷入了布局循环...这是你写任何布局都必须要考虑的。我们提到 SwiftUI 可能会多次调用 sizeThatFits 去测试视图的灵活性。在这些调用,你返回的值应该是合理的。...在下一个例子我们将会把前三个视图水平的放置视图顶部,后三个水平的放置底部。剩下的视图将会在中间,垂直排列。...本例,我创建了两个 UUID 布局值,一个标识视图,另一个作为父视图的 ID。

2.7K30

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

本文将介绍几种 SwiftUI 获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...SwiftUI ,很多的视图控件是对 UIKit( AppKit )控件的二次包装。...目前 SwiftUI 在内部的实现上去 UIKit( AppKit )化很明显,比如,本节介绍的方法 SwiftUI 4.0 已经失效方法二:Runloop我第一次接触 Runloop 是在学习 Combine...:PreferenceKey SwiftUI ,子视图可以通过 preference 视图修饰器向其祖先视图传递信息( PreferenceKey )。...每周也会对当周博客上的新文章以及 Twitter 上发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[9],可以及时获得每周的 Tips 汇总。

3.7K40

老人新兵 —— 一款 iOS APP 的开发手记

整个开发过程我通过 feedback 汇报了十余处明显的 bug,还有很多灵异现象由于无法使用简短的例程重现我都没有办法汇报。...模拟器 NavigationLink 只能使用一次,第二次点会失效,实机没有问题。很难实现直接返回到根视图,通过 dissmiss 只能返回到上层视图。...GeometryReader PreferenceKey 等视图自我认知的好手段。...@FetchRequest 对数据的动态管理非常好, SwiftUI 数据的任何变化都能动态体现。...每周也会对当周博客上的新文章以及 Twitter 上发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[3],可以及时获得每周的 Tips 汇总。

2.5K40
领券