SwiftUI 6.0（iOS 18）将 Sections 也考虑进自定义容器子视图布局（上）

news2024/10/12 10:17:19

在这里插入图片描述

概述

在 WWDC 24 新推出的 SwiftUI 6.0 中，苹果对于容器内部子视图的布局有了更深入的支持。为了能够未雨绸缪满足实际 App 中所有可能的情况，我们还可以再接再厉，将 Sections 的支持也考虑进去。

在这里插入图片描述

SwiftUI 6.0 对容器子视图布局的增强支持可以认为是一个小巧的容器自定义布局（Custome Layout）简化器。

在本篇博文中，您将学到如下内容：

概述
1. SwiftUI 6.0 容器内容的遍历和重新组合
2. SwiftUI 6.0 中新的容器子视图布局考量
3. 容器子视图的遍历
4. 容器子视图的重新组合
总结

有了全新容器子视图布局机制的加持，现在对于任何需要适配自定义容器行为的情况我们都可以游刃有余、从容应对了！

那还等什么呢？Let‘s go！！！😉

1. SwiftUI 6.0 容器内容的遍历和重新组合

苹果在 SwiftUI 4.0（iOS 16）中推出了自定义容器布局（Custom Layout）功能，有了它我们即可放心大胆的创建具有独特外观和行为的容器了：

在这里插入图片描述

Layout 协议弥补了 SwiftUI 不能自定义容器布局之遗憾，将容器中子视图渲染位置的自由度发挥到了极致。

更多关于容器自定义布局的使用和介绍，请小伙伴们移步如下链接观赏精彩的内容：

SwiftUI 打造一款收缩自如的 HStack（四）：Layout 自定义布局

不过，有时候我们仅仅希望稍微调整一下现有容器子视图的布局，比如换成系统默认的现成容器（VStack、HStack、ZStack 等）。在这种情况下使用自定义容器布局 Layout 略显大材小用了。

于是乎，在 SwiftUI 6.0（iOS 18）中苹果给了我们另一套“组合拳”：容器内容的遍历（ForEach）和再组合（Group）。

2. SwiftUI 6.0 中新的容器子视图布局考量

简单来说，在 SwiftUI 6.0 中我们可以使用 ForEach 和 Group 的新构造器来实现容器内容的遍历（探囊取物）和重新组合（聚沙成塔）。前者可以帮助我们方便的将 @ViewBuilder 传入的内容分解为单个容器的子元素，而后者则能让我们在容器整体布局的重构上一展拳脚。

在 SwiftUI 6.0 之前，如果我们想实现一个自定义的 Card 容器可能会这样做：

struct Card<Content: View>: View {
   
    @ViewBuilder var content: Content
    
    var body: some View {
   
        VStack {
   
            content
        }
        .padding()
        .background(Material.regular, in: .rect(cornerRadius: 8))
        .shadow(radius: 4)
    }
}

然后这样来使用它：

struct ContentView: View {
   
    var body: some View {
   
        Card {
   
            Text("Hello, World!")
            Text("My name is Majid Jabrayilov")
        }
    }