CODEWITHSUNDEEP
swiftswiftui
Mr.P
Mr.P

Reputation: 1440

SwiftUI doesn't collapse navbar when single non scroll item is in VStack

I'm having an issue when I scroll that the navbar doesn't collapse to a small one, it only happens when there's an additional "non scrolling" item in the VStack.

The following code works fine

var body: some View {
    NavigationView {
        VStack {
            ScrollView {
                LazyVStack {
                    ForEach(0..<100) { number in
                        Text("\(number)")
                    }
                }
            }
        }
        .navigationBarTitle("Home")
    }
}

and runs as follows:

enter image description here

But when I add something else to the top level VStack, the navbar no longer collapses. So this code:

var body: some View {
    NavigationView {
        VStack {
            SegmentedControl(selectedSegmentIndex: $currentTabIndex, segments: [.new, .new])
            ScrollView {
                LazyVStack {
                    ForEach(0..<100) { number in
                        Text("\(number)")
                    }
                }
            }
        }
        .navigationBarTitle("Home")
    }
}

results in this:

enter image description here

Is there a way to tie the offset of the scroll view to the navbar collapsing? Or any other workaround?

Upvotes: 6

Views: 1180

Answers (1)

Asperi
Asperi

Reputation: 258541

Collapsing is a special behavior of NavigationView & ScrollView/List. So if you want it, put everything inside of ScrollView, like

var body: some View {
    NavigationView {
        ScrollView {
            VStack {
                SegmentedControl(selectedSegmentIndex: $currentTabIndex, 
                    segments: [.new, .new])
                LazyVStack {
                    ForEach(0..<100) { number in
                        Text("\(number)")
                    }
                }
            }
        }
        .navigationBarTitle("Home")
    }
}

Upvotes: 4

Related Questions