CODEWITHSUNDEEP
iosswiftswiftui
kissues
kissues

Reputation: 245

SwiftUI NavigationBar not extending to top of iPhone screen with ScrollView

In my SwiftUI View I have a ScrollView filled with text for attribution to show what frameworks were used in my app.

Once this text scrolls past the navigation bar it should be hidden past that point to the very top of the iPhone screen BUT in my case the text reappears because my navigation bar seems to only be a certain height (see image below) and does not extend to the top of the screen and prevent text from reappearing.

The attribution view below is inside of a AboutView which is also inside of a SettingsView that contains a NavigationView.

Any idea why this is happening? Image is attached..

TEXT RE-APPEARING PAST NAVIGATION BAR

PARENT VIEW

struct Settings: View {
    @Environment(\.presentationMode) var presentation
    @State private var presentAbout: Bool = false
    
    var body: some View {
       NavigationView {
            VStack {
                Text("About").onTapGesture { presentAbout.toggle() }
            }
            .navigationBarTitle("Settings", displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .toolbar(content: {
                Button(action: { 
                     self.presentation.wrappedValue.dismiss()
                }, label: { Text("Cancel") })
            })
            .background ( NavigationLink("", destination: AboutMenu(), isActive: $presentAbout ))
         }
    }
}

SUB VIEW 1

struct AboutMenu: View {
    @Environment(\.presentationMode) var presentation

    @State private var presentAttribution: Bool = false
    
    var body: some View {
        VStack {
            Text("Attribution").onTapGesture { presentAttribution.toggle() }
        }
        .navigationBarTitle("About", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                   Image(systemName: "chevron.backward")     
            }
        })
        .background ( NavigationLink("", destination: Attribution(), isActive: $presentAttribution))
    }
}

SUB VIEW 2 Where problem exists.

struct Attribution: View {
    @Environment(\.presentationMode) var presentation
   
    var body: some View {
        VStack {
            ScrollView {
                Text(attribution) // <- THIS TEXT shows behind NavigationBar past the navigation bar.
            }
        }
        .navigationBarTitle("Attribution", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
               Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                  Image(systemName: "chevron.backward")
            }
        })
    }
}

Upvotes: 1

Views: 966

Answers (1)

Asperi
Asperi

Reputation: 257711

This can happen when ScrollView is not root view of the NavigationView, so it does not recognise scroll view presence.

It can be fixed by explicit clipping, like

VStack {
    ScrollView {
        Text(introText)
    }
    .clipped()       // << here !!

Upvotes: 1

Related Questions