Reputation: 11975
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 }
}
}
}
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
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