Várias visualizações fixadas no topo de um LazyVStack dentro de um ScrollView

Uma maneira de resolver pode ser mostrar o cabeçalho superior (vermelho) como safeAreaInsetum ScrollView.

Boa parte do conteúdo que você tinha antes pode ser descartado. Em particular, nenhum dos seguintes itens é necessário:

• oPreferenceKey
• a variável de estado
• o exteriorVStack
• o fundo GeometryReaderque estava medindo a altura do cabeçalho
• o espaço de coordenadas nomeado.

Aqui está o exemplo (completo) atualizado para mostrar que está funcionando:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {

                // --- Main Content ---
                LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                    ForEach(0..<50) { index in
                        Section {
                            VStack(alignment: .leading, spacing: 0) {
                                Text("Content \(index + 1)")
                                    .padding(.vertical, 10)
                                    .padding(.horizontal)
                                Text("Content \(index + 1)")
                                    .padding(.vertical, 10)
                                    .padding(.horizontal)
                                Text("Content \(index + 1)")
                                    .padding(.vertical, 10)
                                    .padding(.horizontal)
                            }
                            .background(Color.green.opacity(0.5))
                        } header: {
                            Text("Header")
                                .padding(.vertical, 6)
                                .padding(.horizontal)
                                .background(Color.blue.opacity(0.5))
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .background(Color.blue.opacity(0.5))
                        }
                    }
                }
            }
            .safeAreaInset(edge: .top, spacing: 0) {
                HStack {
                    Image(systemName: "pin.fill")
                    Text("Sticky Header")
                        .font(.headline)
                    Spacer()
                }
                .padding()
                .background { Color.red.opacity(0.8) }
            }
            .navigationTitle("Large Title")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

EDITAR Em um comentário você disse:

O problema que vejo com essa solução é que, ao rolar para o topo, você percebe que o cabeçalho vermelho fixo não rola para baixo quando o título rola. Ele se sobrepõe ao título.

Imagino que você esteja se referindo a quando o conteúdo rolado é puxado para baixo, mais baixo do que a capacidade de rolagem. Ao ser solto, ele retorna à posição inicial. Enquanto isso acontece, o cabeçalho permanece parado. No entanto, o título de navegação se move com o conteúdo, então, quando o conteúdo é puxado para baixo, o título de navegação sobrepõe-se ao cabeçalho. O mesmo pode acontecer com uma rolagem intercalar, como pode ser visto no gif acima.

Uma maneira de manter o cabeçalho com o conteúdo quando ele é puxado para baixo é medir o deslocamento de rolagem e aplicá-lo como um deslocamento y ao cabeçalho, se for negativo.

Como seu alvo é o iOS 18, você pode usar .onScrollGeometryChangepara medir o deslocamento rolado e salvar isso em uma variável de estado:

@State private var scrollOffset = CGFloat.zero

ScrollView {
    // ... content as before
}
.safeAreaInset(edge: .top, spacing: 0) {
    HStack {
        Image(systemName: "pin.fill")
        Text("Sticky Header")
            .font(.headline)
        Spacer()
    }
    .padding()
    .background { Color.red.opacity(0.8) }
    .offset(y: max(0, -scrollOffset)) // 👈 added
}
.navigationTitle("Large Title")
.navigationBarTitleDisplayMode(.large)
.onScrollGeometryChange(for: CGFloat.self) { proxy in // 👈 added
    proxy.contentOffset.y + proxy.contentInsets.top
} action: { _, newOffset in
    scrollOffset = newOffset
}

EDIT2 Em vez de usar .onScrollGeometryChangepara medir o deslocamento da rolagem, você também pode usar .onGeometryChangepara medir a posição do LazyVStackno espaço de coordenadas do ScrollView. Funciona da mesma forma:

ScrollView {
    
    // --- Main Content ---
    LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
        // ... as before
    }
    .onGeometryChange(for: CGFloat.self) { proxy in // 👈 here
        proxy.frame(in: .scrollView).minY
    } action: { minY in
        scrollOffset = -minY
    }
}
.safeAreaInset(edge: .top, spacing: 0) {
    // ... as before
}
.navigationTitle("Large Title")
.navigationBarTitleDisplayMode(.large)