1

I had one problem while using SwiftUI. I have implemented a sectionHeader using PinnedView which is currently scrollable all up and down, has a header area, and is LazyVStack. Below is the implementation to show the corresponding content.

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    Text("Header")
                        .frame(maxWidth: .infinity, minHeight: 300)
                        .background(Color.red)
                }

                Section {
                    LazyVStack {
                        ForEach(0...100, id: \.hashValue) { num in
                            Text("\(num)")
                        }
                    }
                } header: {
                    ZStack {
                        Color.black.ignoresSafeArea()

                        Text("Section Header")
                            .frame(maxWidth: .infinity, minHeight: 50)
                            .background(Color.black)
                    }
                }
            }
        }
    }
}

https://i.stack.imgur.com/xp0Uz.jpg

However, I did not stop here and declared a TabView to enable horizontal paging scrolling in the corresponding content area as shown below, but nothing was displayed in the Contents area.

struct ContentView: View {
    @State private var currentIndex = 0

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    Text("Header")
                        .frame(maxWidth: .infinity, minHeight: 300)
                        .background(Color.red)
                }

                Section {

                    TabView(selection: $currentIndex) {
                        LazyVStack {
                            ForEach(0...100, id: \.hashValue) { num in
                                Text("A: \(num)")
                            }
                        }
                        .tag(0)

                        LazyVStack {
                            ForEach(0...100, id: \.hashValue) { num in
                                Text("B: \(num)")
                            }
                        }
                        .tag(1)
                    }

                } header: {
                    ZStack {
                        Color.black.ignoresSafeArea()

                        Text("Section Header")
                            .frame(maxWidth: .infinity, minHeight: 50)
                            .background(Color.black)
                    }
                }
            }
        }
    }
}

https://i.stack.imgur.com/gCzS6.jpg

I have found through debugging that if I declare a TabView inside a ScrollView, the Contents area doesn't show anything. Can you give me an idea on how to use the stickyHeader as in the above example to make it horizontally paging?

Thanks

okstring
  • 11
  • 1

1 Answers1

0

add These Modifiers to the TabView:

TabView {
...
}
.frame(height: UIScreen.main.bounds.height)
.tabViewStyle(.page(indexDisplayMode: .never))
abcdefg
  • 97
  • 1
  • 9