在 SwiftUI 的 NavigationView 中隐藏顶部空间

Question

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

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)
    }

Answer 1

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