noloman
noloman

Reputation: 11975

Hide top space in SwiftUI's NavigationView

I'm having trouble to remove the top space inside a NavigationView.

enter image description here enter image description here

You can see that in the first screen, I have the "Job filters" title, which is later shown in the back button when for example tapping on the Company picker, but the space that the title used to occupy is now empty. How can this be removed?

The body's var of the view is:

var body: some View {
        NavigationView {
            Form {
                ...
                ...
                Picker("FilterView.Company".localized, selection: $draft.company) {
                    SearchBar(searchText: $searchText)
                    Text("FilterView.Company.AllCompanies".localized).tag(nil as Company?)
                    if searchText.isEmpty {
                        ForEach(companiesFetchedResults) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    } else {
                        ForEach(companiesFetchedResults.filter {
                            $0.companyName.contains(searchText)
                        }) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    }
                }
            }
            .navigationBarTitle("FilterViewTitle".localized)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) { cancel }
                ToolbarItem(placement: .navigationBarTrailing) { done }
            }
        }
    }

Edit

As suggested by @Stefan I've managed to extract the Form into a separate view, but it still doesn't work:

FilterView:

var body: some View {
        NavigationView {
            FormView(draft: $draft)
                .navigationBarTitle("FilterViewTitle".localized)
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) { cancel }
                    ToolbarItem(placement: .navigationBarTrailing) { done }
                }
        }
    }

FormView:

var body: some View {
        VStack {
            Form {
                ...
                ...
                Picker("FilterView.Company".localized, selection: draft.company) {
                    SearchBar(searchText: $searchText)
                    Text("FilterView.Company.AllCompanies".localized).tag(nil as Company?)
                    if searchText.isEmpty {
                        ForEach(companiesFetchedResults) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    } else {
                        ForEach(companiesFetchedResults.filter {
                            $0.companyName.contains(searchText)
                        }) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    }
                }
            }
        }.navigationBarTitleDisplayMode(.inline)
    }

Upvotes: 0

Views: 1667

Answers (1)

Stefan
Stefan

Reputation: 1335

You need to explicitly set navigationBarTitleDisplayMode to inline, which should solve your problem:

.navigationBarTitleDisplayMode(.inline)

EDIT:

Why is there a huge big gap between the back button and the starting element of the view?

TL;DR: Do not embed pushed views in the NavigationView

Upvotes: 4

Related Questions