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

12.2K20
  • GeometryReader :好东西还是坏东西?

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

    65770

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

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

    6.8K40

    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

    SwiftUI 之 HStack 和 VStack 的切换

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

    2.9K10

    如何在 SwiftUI 中创建条形图

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

    5.2K10

    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.3K20

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

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

    29910

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

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

    30120

    掌握 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.7K31

    用 SwiftUI 的方式进行布局

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

    3.3K00

    用 SwiftUI 的方式进行布局

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

    4.8K80

    掌握 ViewThatFits

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

    23510

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

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

    14.8K30

    深入了解 SwiftUI 5 中 ScrollView 的新功能

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

    92120

    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.8K40
    领券