Aqui está um exemplo de código completo de uma tentativa de visualização de cabeçalho duplo fixo:
struct ContentView: View {
var body: some View {
ScrollView(showsIndicators: false) {
LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
Section {
SecondView()
} header: {
HeaderView()
}
}
}
}
}
struct HeaderView: View {
var body: some View {
Rectangle()
.fill(.green)
.frame(height: 50)
}
}
struct SecondView: View {
var body: some View {
LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
Section {
VStack {
ForEach(0..<20) { index in
ItemView(index: index)
}
}
} header: {
SecondHeaderView()
}
}
}
}
struct SecondHeaderView: View {
var body: some View {
Rectangle()
.fill(.red)
.frame(height: 60)
}
}
struct ItemView: View {
let index: Int
var body: some View {
VStack {
Text("Item \(index)")
.padding()
}
.frame(height: 80)
.background(.gray)
}
}
#Preview {
ContentView()
}
Note que inicialmente, o vermelho SecondHeaderView
está corretamente posicionado abaixo do verde HeaderView
. No entanto, ao rolar, o cabeçalho vermelho rola abaixo do cabeçalho verde até que fique na mesma posição y que o cabeçalho verde.
Preciso que o cabeçalho vermelho fique ancorado abaixo do cabeçalho verde. Note que ele SecondView
pode não estar sempre incorporado em um ContentView
. Ele poderia viver sozinho e ainda precisar de seu próprio cabeçalho fixo para funcionar, então acho que ambas as visualizações precisam do LazyVStack
.
Eu mexi em vários deslocamentos de visualização do GeometryReader, tentando posicionar o cabeçalho vermelho corretamente, mas não consegui.