Início / coding / Perguntas / 79324938
Accepted
soleil
Asked: 2025-01-03 04:49:35 +0800 CST

Cabeçalho fixo do SwiftUI scrollview sem usar lista

  • 772

Tenho lutado GeometryReadere .onChange(of: geo.frame(in: .global).minY)tentado por muito tempo fazer isso funcionar sem muito sucesso. Considere o seguinte:

struct TestScreen: View {
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    Text("View A")
                        .frame(height: 50)
                        .frame(maxWidth: .infinity)
                        .background(.green)
                    Text("View B - Sticky")
                        .frame(height: 50)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                    ForEach(0..<15) { i in
                        Text("View \(i)")
                            .frame(height: 50)
                            .frame(maxWidth: .infinity)
                            .background(Color.red)
                    }
                }
                
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbarBackground(.clear, for: .navigationBar)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    Text("Testing")
                        .foregroundColor(.purple)
                }
            }
        }
    }
}

O objetivo é fazer com que a View B fique no topo (logo abaixo da barra de navegação) quando você rolar a view para cima e, claro, tome seu lugar normal na scrollview quando você rolar de volta para baixo. Eu sei que você pode fazer cabeçalhos fixos com Liste Sectionsmas isso não atende às minhas necessidades porque note que a View B (a view fixa) não é necessariamente o primeiro item na scrollview.

Observe também que a Exibição B deve permanecer no topo de todo o outro conteúdo no VStack para que o outro conteúdo role abaixo dela.

swiftui

1 respostas

  1. Best Answer

    Tente usar um LazyVStackcom seções e cabeçalhos fixados:

    • A primeira seção contém a Visualização A, sem cabeçalho.
    • A segunda seção contém o ForEachcomo conteúdo principal e a Visualização B como cabeçalho.
    ScrollView {
    LazyVStack(pinnedViews: .sectionHeaders) {
        Section {
            Text("View A")
                // ... modifiers as before
        }
        Section {
            ForEach(0..<15) { i in
                // ... content as before
            }
        } header: {
            Text("View B - Sticky")
                // ... modifiers as before
        }
    }
}

    Animação

    • 1

relate perguntas