SwiftUI：LazyVStack固定视图异常问题的替代方案及自定义固定Stack可行性咨询

Hey there! Sorry to hear you're running into that frustrating issue with LazyVStack's pinned views disappearing when content updates at the bottom. Let's walk through a few reliable alternative approaches to get that sticky header working, plus a way to build a custom stack if you want full control over the behavior.

1. ScrollView + Independent Sticky Header (Simplest Fix) #

Instead of relying on LazyVStack's pinned views, separate your sticky header from the scrollable content and manually control its position based on scroll offset. This avoids all the lazy-loading quirks entirely.

Here's a working implementation:

struct StickyHeaderContainer: View {
    let header: () -> View
    let scrollContent: () -> View
    
    @State private var scrollOffset: CGFloat = 0
    private let headerHeight: CGFloat = 65 // Adjust to match your header's actual height
    
    var body: some View {
        ZStack(alignment: .top) {
            ScrollView {
                VStack(spacing: 0) {
                    // Spacer to reserve space for the header initially
                    Color.clear.frame(height: headerHeight)
                    scrollContent()
                }
                .background(
                    GeometryReader { proxy in
                        Color.clear.preference(
                            key: ScrollOffsetKey.self,
                            value: proxy.frame(in: .named("scrollArea")).minY
                        )
                    }
                )
            }
            .coordinateSpace(name: "scrollArea")
            .onPreferenceChange(ScrollOffsetKey.self) { newValue in
                scrollOffset = newValue
            }
            
            // Your sticky header
            header()
                .frame(height: headerHeight)
                .background(Color.white) // Prevent scroll content from showing through
                .offset(y: max(-scrollOffset, 0))
        }
    }
}

// Helper to track scroll offset
private struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

// Usage example
struct ContentView: View {
    @State private var listItems = Array(1...40)
    
    var body: some View {
        StickyHeaderContainer(
            header: {
                Text("Persistent Sticky Header")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .border(.gray)
            },
            scrollContent: {
                ForEach(listItems, id: \.self) { item in
                    Text("List Item \(item)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.gray.opacity(0.1))
                }
                Button("Add New Item") {
                    listItems.append(listItems.count + 1)
                }
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
            }
        )
    }
}

This setup keeps the header locked at the top once you scroll past its initial position, and content updates won't trigger those random disappearances.

2. Custom Sticky Stack Component #

If you want a reusable, self-contained component that acts like a stack but supports sticky headers, you can build one using PreferenceKey and GeometryReader to track scroll positions. This gives you full control over how the sticky behavior works.

Here's a basic version you can extend:

struct StickyStack<Header: View, Content: View>: View {
    let header: Header
    let content: Content
    
    @State private var isHeaderSticky = false
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                header
                    .background(Color.white)
                    .anchorPreference(key: HeaderBoundsKey.self, value: .bounds) { anchor in
                        return [anchor]
                    }
                
                content
                    .background(
                        GeometryReader { proxy in
                            Color.clear.preference(
                                key: ContentOffsetKey.self,
                                value: proxy.frame(in: .global).minY
                            )
                        }
                    )
            }
        }
        .overlayPreferenceValue(HeaderBoundsKey.self) { headerAnchors in
            if let headerAnchor = headerAnchors.first {
                header
                    .background(Color.white)
                    .frame(width: headerAnchor.width)
                    .position(
                        x: headerAnchor.midX,
                        y: isHeaderSticky ? headerAnchor.minY : headerAnchor.midY
                    )
                    .onPreferenceChange(ContentOffsetKey.self) { contentTopY in
                        // Trigger sticky behavior when content scrolls past the header's bottom edge
                        isHeaderSticky = contentTopY < headerAnchor.maxY
                    }
            }
        }
    }
}

// Helper to track header bounds
private struct HeaderBoundsKey: PreferenceKey {
    static var defaultValue: [Anchor<CGRect>] = []
    static func reduce(value: inout [Anchor<CGRect>], nextValue: () -> [Anchor<CGRect>]) {
        value.append(contentsOf: nextValue())
    }
}

// Helper to track content scroll offset
private struct ContentOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

// Usage example
struct CustomStackDemo: View {
    @State private var dataItems = Array(1...30)
    
    var body: some View {
        StickyStack(
            header: Text("Custom Sticky Header")
                .font(.title)
                .padding()
                .border(.black),
            content: {
                ForEach(dataItems, id: \.self) { item in
                    Text("Row \(item)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue.opacity(0.1))
                }
                Button("Shuffle Items") {
                    dataItems.shuffle()
                }
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(8)
            }
        )
    }
}

This custom stack handles all the sticky logic internally, so you can use it just like a regular VStack but with built-in header pinning.

3. Quick Fix for Your Original LazyVStack Setup (Optional) #

If you still want to stick with LazyVStack, try adding a stable id to your Section and assigning a fixed coordinate space to the ScrollView. Sometimes lazy loading gets confused when content changes, so locking the section's identity might help:

ScrollView {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        Section(header: Text("Pinned Header").id("stable-sticky-header")) {
            // Your scrollable content here
        }
    }
    .coordinateSpace(name: "fixed-scroll-space")
}

This isn't guaranteed to work for all cases, but it's a quick test before switching to a completely different approach.

Hope one of these methods solves your issue! Let me know if you need help tweaking any of the code.

内容的提问来源于stack exchange，提问作者Toto