当元素到达屏幕顶部时，将元素与 ScrollView 对接

Question

以下图为例。标题下方的整个屏幕，包括图像冠、人物图像和文本生命是一个 ScrollView。我想要的是文本“任务”到达“生活”区域，它停止上升，这使它看起来像停靠在顶部。另外，我希望“任务”可以是一个按钮，所以我们总是可以一点击就跳回任务列表。

那么，我应该在 SwiftUI 中使用什么元素来实现呢？

Answer 1

如果您在滚动视图中有一个 LazyVStack，您可以实现一个带有皇冠、文本和人物图标标题的部分（这 3 个将在 HStack 中），然后惰性堆栈有一个名为 pinnedViews 的参数，您可以在其中将放.sectionHeaders。当您向上滚动时，这应该将 HStack 固定到顶部。

var body: some View {
        ZStack {
            Color.red
            ScrollView {
                LazyVStack(pinnedViews: .sectionHeaders) {
                    Section(header:
                                HStack {
                        Button(action: { }) {
                            Text("Crown")
                                .foregroundColor(contentSelection == .one ? .black : .gray)
                        }
                        
                        Spacer()
                        
                        Button(action: { }) {
                            Text("Life")
                                .foregroundColor(contentSelection == .two ? .black : .gray)
                        }
                        
                        Spacer()
                        
                        Button(action: { }) {
                            Text("Person")
                        }
                    }
                    .padding()
                    .background(Color.green)
                            
                    ) {
                        VStack {
                            ForEach((1...50), id: \.self) { item in
                                ZStack {
                                    Text("This is item number \(item)")
                                }
                                .frame(height: 80)
                            }
                        }
                    }
                }
            }
        }
    }