PinnedScrollableViews

在 SwiftUI 中，PinnedScrollableViews 是一个与 ScrollView 和 List 结合使用的功能，用于固定某些内容（通常是头部或分组标题）在滚动区域的顶部或其他特定位置。这个功能从 iOS 16 开始引入，为开发者提供了一种更灵活的滚动内容布局控制方式。

什么是 `PinnedScrollableViews`？ #

PinnedScrollableViews 是 ScrollView 或 List 的一个选项，允许特定类型的滚动内容（如分组标题）在滚动时固定（Pinned）在视图的某个位置，例如顶部。

常见场景：
- 悬停的分组标题（Section Headers）。
- 固定的导航条或工具栏。
- 类似于 iOS 原生设置中的 “分区标题” 效果。

如何使用 `PinnedScrollableViews`？ #

PinnedScrollableViews 的类型为一个 Set，可以通过它指定哪些滚动元素可以被固定。SwiftUI 提供了两个内置值：

SectionHeaders：分组标题（Section Header）会在滚动时悬停在顶部。
SectionFooters：分组页脚（Section Footer）会类似地悬停。

语法 #

与 ScrollView 和 List 的配合使用：

ScrollView(.vertical) {
    // 内容
}
.pinnedScrollableViews([.sectionHeaders, .sectionFooters]) // 指定固定规则

或者：

List {
    // 内容
}
.pinnedScrollableViews([.sectionHeaders]) // 仅固定分组标题

示例 1：在 `List` 中固定分组标题 #

最常见的用法是在 List 的分组结构中让分组标题 Section Header 固定在滚动视图顶部。

import SwiftUI

struct PinnedSectionHeaderExample: View {
    var body: some View {
        List {
            Section(header: Text("Group 1").font(.headline)) {
                ForEach(0..<10) { index in
                    Text("Item \(index)")
                }
            }
            
            Section(header: Text("Group 2").font(.headline)) {
                ForEach(10..<20) { index in
                    Text("Item \(index)")
                }
            }
        }
        .pinnedScrollableViews([.sectionHeaders]) // 固定分组标题
    }
}

效果： #

当用户向上滚动时：
- Group 1 的标题会悬停在视图顶部，直到 Group 2 的内容到达。
- Group 2 的标题接替悬停效果，固定在顶部。

示例 2：自定义分组页脚 `Section Footer` #

如果需要固定分组的页脚，可以使用 .sectionFooters。

import SwiftUI

struct PinnedFooterExample: View {
    var body: some View {
        List {
            Section(
                footer: Text("End of Group 1").font(.caption)
            ) {
                ForEach(0..<10) { index in
                    Text("Item \(index)")
                }
            }

            Section(
                footer: Text("End of Group 2").font(.caption)
            ) {
                ForEach(10..<20) { index in
                    Text("Item \(index)")
                }
            }
        }
        .pinnedScrollableViews([.sectionFooters]) // 固定分组页脚
    }
}

效果： #

当用户滚动时，End of Group 1 或 End of Group 2 作为页脚悬停在视图的底部。

示例 3：在 `ScrollView` 中嵌套自定义内容 #

你可以在 ScrollView 中自定义布局并使用 PinnedScrollableViews。

import SwiftUI

struct ScrollPinnedExample: View {
    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: [.sectionHeaders]) {
                Section(header: Text("Sticky Header 1")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)) {
                        ForEach(0..<10) { index in
                            Text("Item \(index)")
                                .padding()
                        }
                    }
                
                Section(header: Text("Sticky Header 2")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.green)) {
                        ForEach(10..<20) { index in
                            Text("Item \(index)")
                                .padding()
                        }
                    }
            }
        }
        .pinnedScrollableViews([.sectionHeaders]) // 固定自定义分区头部
    }
}

效果： #

Sticky Header 1 和 Sticky Header 2 分别在滚动时悬停在顶部，具有自定义的样式。