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

未使用动态content SwiftUI正确更新ForEach

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架,用于构建 iOS、macOS、watchOS 和 tvOS 应用程序的用户界面。ForEachSwiftUI 中的一个视图构造器,用于遍历一个集合,并为集合中的每个元素创建一个视图。

相关优势

  • 声明式编程SwiftUI 采用声明式编程模型,使得 UI 的构建更加直观和简洁。
  • 性能优化SwiftUI 通过自动布局和合成技术,提供了高效的 UI 渲染。
  • 跨平台SwiftUI 支持多个苹果平台,减少了开发者的工作量。

类型

ForEach 可以遍历多种类型的集合,包括数组、集合和范围。

应用场景

ForEach 常用于需要动态显示集合数据的场景,例如列表、网格等。

问题及解决方案

问题

未使用动态 contentForEach 无法正确更新视图。

原因

ForEach 需要一个动态的 content 闭包来生成每个元素的视图。如果没有使用动态 contentForEach 可能无法检测到集合的变化,从而导致视图不更新。

解决方案

确保在 ForEach 中使用动态 content 闭包,并且集合是可观察的(例如使用 ObservableObjectState)。

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        VStack {
            ForEach(items.indices, id: \.self) { index in
                Text(items[index])
                    .padding()
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
            }
        }
        .padding()
        .onAppear {
            // 模拟数据更新
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                self.items.append("Item \(self.items.count + 1)")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考链接

通过上述代码示例,可以看到 ForEach 使用了动态 content 闭包,并且 items 是一个 @State 属性,这样当 items 发生变化时,视图会自动更新。

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

相关·内容

GeometryReader :好东西还是坏东西?

特别是在最近几次 SwiftUI 更新中新增了一些可以替代 GeometryReader 的 API 后,这种观点进一步加强。...这些批评并非全无道理,其中相当一部分已经通过新的 API 在 SwiftUI 版本更新后得到了改善或解决。...但实际上,它的显示结果是完全正确的,这就是正确的布局结果。 因此,在这种情况下,通常我们只会使用拥有明确值维度的尺寸( 建议尺寸有值 ),并以此为来计算另一维度的尺寸。...这样可以避免由于反复传递几何数据导致的大量视图的反复更新。 然而,这并不意味着在使用 GeometryReader 时没有需要注意的事项。...然而,毫无疑问,GeometryReader 仍是 SwiftUI 中一个重要的工具。开发者需要正确地将其应用于适当的场景。

63070
  • 掌握 SwiftUI 中的 ScrollView:滚动几何

    前言本文探讨了如何使用 onScrollGeometryChange 视图修饰符有效地监控和管理滚动位置和几何。通过详细的代码示例和解释,你将学习如何利用这些工具创建动态和响应迅速的用户界面。...SwiftUI 是一个强大的框架,它简化了在苹果平台上构建用户界面的过程。SwiftUI 中的一个基本组件是 ScrollView,它允许用户通过滚动导航内容。...动作闭包:处理滚动几何的变化,通过比较旧值和新值,允许我们相应地更新状态属性。...完整代码示例分析下面是一个完整的 SwiftUI Demo,其中包含了我们刚刚讨论的 ScrollView、ScrollGeometry 和 onScrollGeometryChange 的使用示例。...这些工具为开发者提供了对滚动位置和交互的精确控制和洞察,增强了动态和响应迅速的用户界面的开发。通过利用这些功能,你可以创建更具吸引力和直观的应用程序。

    13111

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

    访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...遗憾的是,SwiftUI 并没有提供这方面的 API 。本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...因此,我们可以通过访问其背后的 UIKit 控件的方式( 使用 Introspect[5] )来实现本文的需求。...: Content) -> some View { content .onAppear { self.delegate.isScrolling...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化( 例如 List 中某个视图的尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图的变化结束后,状态会马上恢复到滚动结束滚动开始后

    3.8K40

    SwiftUI 新容器视图 API 深度解析:轻松构建自定义布局

    本周,我们将学习 SwiftUI 新的分解 API 的优势。容器视图容器视图就是一个可以包含其他视图的视图。我们可以使用 @ViewBuilder 闭包轻松定义一个容器视图。...访问子视图另一种新的 API 允许我们通过索引访问子视图,而不是使用 ForEach 视图进行迭代。...组合子视图如你所见,我们使用 Group 视图来分解内容视图,然后以另一种方式组合子视图。我们还利用了 id 参数的功能,允许我们使用 ForEach 视图与普通数据一起工作。...import SwiftUI// 定义 Card 视图,作为一个基本的容器视图struct Card: View { @ViewBuilder var content...总结通过使用 SwiftUI 新引入的 API 以及容器视图,你可以轻松构建具有良好复用性的自定义布局,提升应用的开发效率和代码可维护性。

    13011

    SwiftUI 布局协议 - Part2

    Part 1 - 基础: 什么是布局协议 视图层次结构的族动态 我们的第一个布局实现 容器对齐 自定义值:LayoutValueKey 默认间距 布局属性和 Spacer() 布局缓存 高明的伪装者 使用...另外两个旋转指向中心,但是一个不使用动画而另一个使用。 避免布局循环和崩溃 众所周知我们在布局期间不能更新视图状态。这会导致不可预测的结果,很可能会使 CPU 达到峰值。...因此当我们使用上一部分中描述的"欺骗"的技巧,我们必须使用 DispatchQueue 用队列更新。...此外,在与其他视图布局工作的时候,我们就相当于 SwiftUI 的角色。子布局的任何缓存创建和更新都属于我们的责任,幸运的是,这都很容易处理。我们只需要添加子布局缓存到我们自己的缓存里。...如果你制定建议,最小,理想和最大尺寸都将被覆盖。

    2.7K30

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

    可以在 此处[1] 获取完整的演示代码 访问我的博客 www.fatbobman.com[2] 可以获得更好的阅读体验以及最新的更新内容。...使用 safeAreaInset: ScrollView { ForEach(0 ..< 20) { i in CellView(width: nil)...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...仅适用于 ScrollView 当 ForEach 中的数据源遵循 Identifiable 协议时,无需显式使用 id 修饰符设置标识 与 scrollTargetLayout 配合使用,可以获取当前的滚动位置....coordinateSpace(.named("MyScrollView")) 设置的坐标系不同,预设的 .scrollView 坐标系可以正确处理 contentMargins 创建的 margin

    83420

    SwiftUI 的动画机制

    阅读本文前,读者最好已拥有在 SwiftUI使用动画编程的经历,或对 SwiftUI 动画的基本使用方法有一定的了解。可以在 此处获取本文的全部代码[2] SwiftUI 的动画是什么?...当状态的改变导致视图树的分支发生变化时,SwiftUI使用其包裹的可动画部件对视图进行动画处理。 使用转场同样需要满足 SwiftUI 动画的三要素。...: Content) -> some View { content .rotationEffect(rotation) // 可动画部件 } } extension...状态、视图标识、动画 既然 SwiftUI 的动画是创建从一个状态到另一个状态的平滑过渡,那么我们必须对状态(依赖项)的改变可能导致的结果有正确的认识。...这意味着,当数组中出现了两个同样的元素(点击添加按钮),SwiftUI 将无法正确识别我们的意图 —— 究竟是想对那个元素(值相同意味着标识也相同)进行操作。

    14.8K40

    在 iOS16 中用 SwiftUI 图表定制一个线图

    在 iOS 16 中引入的 SwiftUI 图表,可以以直观的视觉格式呈现数据,并且可以使用 SwiftUI 图表快速创建。本文演示了几种定制折线图并与区域图结合来展示数据的方法。...在 Swift 图表中使用 Foudation 库中的测量类型 默认折线图 从在 iOS 16 中用 SwiftUI Charts 创建一个折线图中使用 SwiftUI Charts[1]创建默认折线图开始...图表中使用自定义颜色将折线图与面积图结合起来 结论 SwiftUI Charts目前处于测试阶段,在Xcode性能和编译一些图表选项方面可能会有一些问题,但它很容易就能开始使用图表。...(content:) [4] chartBackground: https://developer.apple.com/documentation/swiftui/view/chartplotstyle...(content:) [5] AxisMarks: https://developer.apple.com/documentation/swiftui/view/chartyaxis(content:)

    2.7K20

    架构之路 (五) —— VIPER架构模式(一)

    通过使用@Published属性包装器声明它,视图将能够监听属性的变化并自动更新自身。 下一步是将此列表与来自interactor的数据模型同步。...content块可以是任何一个SwiftUI视图。但在本例中,TripListView将提供一个TripListCell。...导航栏修饰符使用presenter发布的tripName来定义标题,因此当用户键入时,它就会更新,而保存按钮则会保存任何更改。 构建并运行,现在,您可以编辑trip标题。...使用实时预览(Live Preview)查看地图正确: 要将地图添加到应用程序,首先将以下方法添加到TripDetailPresenter: func makeMapView() -> some View...使用presenter向列表添加新路径点的add按钮。 一个列表List,它使用ForEach与presenter为每个路点创建一个单元格。

    17.5K10

    SwiftUI 布局 —— 尺寸( 上 )

    例如,下面是 VStack 的构造函数,content 被传递给了真正的布局容器 _VStackLayout 进行布局: public struct VStack: SwiftUI.View...不过需要注意的是,在 SwiftUI 中,有一类视图是会在视图树上显示为父视图,但并不具备布局能力。其中的代表有 Group、ForEach 等。...这类视图的主要作用有: 突破 ViewBuilder Block 的数量限制 方便为一组视图统一设置 view modifier 有利于代码管理 其他特殊应用,如 ForEach 可支持动态数量的子视图等...即使你对 Layout 协议不了解或短时间无法使用 SwiftUI 4.0 ,并不会影响你对下文的阅读和理解。...例如:ZStack 会将其父视图提供给它的建议模式直接转发给 ZStack 的子视图,而 VStack、HStack 则会要求子视图返回全部模式下的需求尺寸,以判断子视图是否为动态视图( 在特定维度可以动态调整尺寸

    4.8K20

    只在视图 Body 中生存的变量

    SwiftUI 通过调用视图实例的 body 属性来获取视图值。...但很少有人会在 body 中去使用 var 来定义变量,因为实在找不到使用 var 的理由和意义。本文将探讨在 SwiftUI 的视图 body 中用 var 来创建变量的意义和可能的场景。...不过就和通过 let _ = print("update") 能够帮助我们了解视图的动态一样,掌握了在 body 中通过 var 创建变量及应用的方法,也将有助于开发者更好地理解 SwiftUI 视图的求值逻辑并掌握其时机...在数据变化时(包括首次提取数据),FetchRequest 会根据数据量向视图发送更新信号(可通过 onRecevie 来验证) 虽然不能假设,但我们可以通过下面的方法,让 offset 的数据,在首行获得重置...在 SwiftUI 所有的惰性容器中,都会出现计算两次的情况( 或许与惰性容器的视图值保存机制有关 ),这就要求我们为了得到正确的 offset 值必须进行除 2 的操作。

    68810

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

    本文将通过一个优化列表视图的案例,展现在 SwiftUI 中查找问题、解决问题的思路,其中也会对 SwiftUI 视图的显式标识、@FetchRequest 的动态设置、List 的运作机制等内容有所涉及...标识( Identity )是 SwiftUI 在程序的多次更新中识别相同或不同元素的手段,是 SwiftUI 理解你 app 的关键。...在 SwiftUI 中为视图设置显式标识目前有两种方式: 在 ForEach 的构造方法中指定 由于 ForEach 中的视图数量是动态的且是在运行时生成的,因此需要在 ForEach 的构造方法中指定可用来标识子视图的...使用了 id 修饰符相当于将这些视图从 ForEach 中拆分出来,因此丧失了优化条件。 总之,当前在数据量较大的情况下,应避免在 List 中对 ForEach 的子视图使用 id 修饰符。...我们可以通过在 ForEach 的外面分别为列表端点设置显式标识来解决使用 scrollTo 滚动到指定位置的问题。

    9.2K20

    干货 | 关于SwiftUI,看这一篇就够了

    其实View是SwiftUI一个核心的协议,代表了闭包中元素描述。如下代码所示,其是通过一个associatedtype修饰的,带有这种修饰的协议不能作为类型来使用,只能作为类型约束来使用。...但是,在SwiftUI里面,视图中声明的任何状态、内容和布局,源头一旦发生改变,会自动更新视图,因此,只需要一次布局。在属性前面加上@State关键词,即可实现每次数据改动,UI动态更新的效果。...SwiftUI内部按上述所说的逻辑,判断对应视图是否需要更新UI,最终再次呈现给用户,等待交互; 以上就是SwiftUI的交互流程,其每一个节点之间的数据流转都是单向、独立的,无论应用程序的逻辑变得多么复杂...SwiftUI; 虽然SwiftUI优点很多,但是其使用的门槛很高,只能在iOS 13以上的系统使用;仅这点,很多公司和开发者望而却步,目前主流应用最低支持iOS 9,至少3年之内,SwiftUI只能作为一个理论的知识储备...,所以其还有很长的路要走; SwiftUI这种与平台无关、纯描述的UI框架,恰恰是跨平台方案的正确方向,将来其能否统一整个大前端呢?

    9K11

    AnyView 对 SwiftUI 性能的影响

    你可以在这个出色的 WWDC 演讲中找到有关 SwiftUI 差异机制的更多细节。Apple 也多次提到,我们应该避免在 ForEach使用 AnyView,称其可能会导致性能问题。...一个可能发生的情况是无尽的不同视图列表,呈现不同类型的数据(例如聊天、活动动态等)。...这也是预期的,因为 SwiftUI 知道视图的标识和结构。当需要更新视图时,仅对其进行更改(例如,向视图添加另一个反应)。...有 AnyView当我们在这种情况下使用 AnyView 时,事情就变得有趣了 - 在短时间内对屏幕上的视图进行频繁更新。...通过使用 AnyView,效果类似于将 id 修饰符的值设置为 UUID() - 这将在发生更改时始终更新视图项目。

    14200

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

    Identifiable 和 Hashable 协议确保我们可以轻松创建具有 ForEach 循环的 SwiftUI 视图。...如我之前所提到的,视图将使用嵌套的 ForEach 循环创建。 需要记住的是,ForEach 循环要求迭代的集合中的每个元素必须符合 Identifiable 协议,或者应该具有唯一的标识符。...这就是为什么我首先将整个 ForEach 循环包装在 HStack 中,然后再包装在 Group 中,以确保编译器可以正确解释一切。...现在 FlexiblePicker 已经完成,可以使用了! 总结 这篇文章介绍了如何使用 SwiftUI 构建一个灵活的选择器(FlexiblePicker),用于选择多个选项。...最后,提供了一个简单的视图实现,可以在 SwiftUI使用该选择器。这个选择器可用于创建各种交互式选择界面。 - EOF -

    29720

    SwiftUI 之 HStack 和 VStack 的切换

    相反,让我们像 SwiftUI 一样,对这些属性参数化,同时设定框架所使用的默认值 — 就像这样: struct DynamicStack: View { var...将可以在常规的尺寸渲染时动态切换成水平布局(例如在大尺寸的 iPhone 使用横屏,或者全屏 iPad 上的任一方向),而其它所有尺寸的配置使用垂直布局。...使用布局协议 虽然我们最后已经用了非常棒的解决方案,可以在所有支持 SwiftUI 的 iOS 版本中使用,但也让我们来探索一下在 iOS 16 中引入的一些新的布局工具(在写这篇文章时,它作为...Xcode 14 的一部分仍在测试阶段) 其中一个工具是新的 Layout 协议,它既能让我们创建完整的自定义布局,直接集成到 SwiftUI 的布局系统中,同时也提供给我们一种更丝滑更动画的方式在各种布局之间动态切换...现在我们能通过使用新的 currentLayout 解决使用什么布局,现在我们来更新 body 的实现,简单调用从该属性返回的 AnyLayout ,就像函数一样 — 像这样: struct DynamicStack

    2.8K10
    领券