ios – SwiftUI – An excessive amount of house between search bar and navigation title

I’m engaged on a posh app with an excessive amount of of code, however I attempted making a pattern app with crucial working code to clarify my downside.

So for instance I’ve a content material view with a button which opens a modal/sheet (named “Most important View”) with a navigation title, a search bar and a button. On this important view, search bar and navigation title are positioned appropriately. Once I faucet on button with important view, it navigates to a different view (named “Sub View”) which has search bar, navigation title and ultimately can have a again button to navigate again to Most important View. On this Sub View, I’m seeing navigation title and search bar not positioned appropriately i.e. there may be lots of house between navigation title and search bar. Am not ready to determine the reason for it and find out how to repair it.. any concepts or ideas on it?

Code:

import SwiftUI
import Basis
import Mix

@important
struct SampleAppApp: App {
    var physique: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
            }
        }
    }
}

struct ContentView: View {
    @State personal var showModal: Bool = false
    var physique: some View {
        VStack {
            Button("Click on ME", motion: { self.showModal.toggle() })
        }
        .sheet(isPresented: $showModal) {
            ZStack {
                Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97)
                MainView(isPresented: $showModal).padding(.high, 15.0)
            }
        }
    }
}

// MARK: Code for Most important View after "Click on ME" is clicked
struct MainView: View {
    @State personal var searchText = ""
    let searchTextPublisher = PassthroughSubject<String, By no means>()

    /// Set to true when the panel is displayed. Dismisses the panel when set to false.
    var isPresented: Binding<Bool>
    @State personal var showSubView: Bool = false

    var physique: some View {
        NavigationStack {
            ZStack {
                Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97).edgesIgnoringSafeArea(.all)
                VStack {
                    VStack {
                        Button("Faucet to open sub-view", motion: {
                            self.showSubView.toggle()
                        }).padding(.high, 20.0)
                    }
                    .navigationDestination(isPresented: $showSubView) {
                        SubView()
                    }
                    
                    MainViewSearchResultListAndNavTitle()
                    .searchable(
                        textual content: $searchText,
                        placement: .navigationBarDrawer(displayMode: .all the time),
                        immediate: "search"
                    )
                    .onChange(of: searchText) { newText in
                        searchTextPublisher.ship(newText) /// Publishes when a search time period is modified. That is used to debounce the search.
                    }
                    Spacer()
                }
                .body(maxWidth: .infinity, maxHeight: .infinity)
                .background(Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97))
            }
        }
        .presentationDetents([.large])
        .interactiveDismissDisabled(true)
        .presentationBackgroundInteraction(.enabled)
    }
}

/// Exhibits search bar and search outcomes checklist.
struct MainViewSearchResultListAndNavTitle: View {
    var physique: some View {
        VStack {
            // Comprises search outcomes checklist
        }
        .toolbar(content material: {
            ToolbarItem(placement: .navigationBarLeading) {
                Textual content("Most important View")
                    .daring()
                    .font(.largeTitle)
                    .padding(.backside, 15.0)
            }
        })
        .toolbarBackground(Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97), for: .navigationBar)
        .toolbarBackground(.seen, for: .navigationBar)
    }
}

// MARK: Code for Sub View after "Faucet to open sub-view" is clicked. This view can have again button to return to 2nd view i.e. "Most important View".
struct SubView: View {
    var physique: some View {
        ZStack {
            Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97).edgesIgnoringSafeArea(.all)
            VStack {
                SubViewSearchResultsListAndNavTitle()
                .searchable(
                    textual content: .fixed(""),
                    placement: .navigationBarDrawer(displayMode: .all the time),
                    immediate: "search"
                )
                Spacer()
            }
            .body(maxWidth: .infinity, maxHeight: .infinity)
            .background(Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97))
        }
    }
}

personal struct SubViewSearchResultsListAndNavTitle: View {
    var physique: some View {
        VStack {
            // Comprises search outcomes checklist for sub view.
        }
        .toolbar(content material: {
            ToolbarItem(placement: .principal) {
                Textual content("Sub view").daring()
                    .font(.title)
                    .padding(.backside, 15.0)
            }
        })
        .toolbarBackground(Colour(pink: 0.95, inexperienced: 0.95, blue: 0.97), for: .navigationBar)
        .toolbarBackground(.seen, for: .navigationBar)
        .navigationBarBackButtonHidden(true)
    }
}

Screenshot: