ios – SwiftUI: Inserting search bar at all times on prime

Spread the love


I want to have search bar on prime of the sheet at all times. I’m utilizing searchable and it doesn’t matter what worth I set “navigationBarDrawer” to, the search bar strikes to prime each time I faucet inside it. I want to have search bar statically positioned such that it by no means strikes, much like search bar in backside panel of Apple Maps.

How do I obtain it?

Code:

import SwiftUI
import Basis
import Mix

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

struct SimpleTestData {
    let id = UUID()
    let rating: Int
    let identify: String
}

struct ContentView: View {
    var physique: some View {
        VStack {
            Textual content("Hey World")
        }
        .sheet(isPresented: .fixed(true)) {
            ContentNewView()
        }
    }
}

struct ContentNewView: View {
    @State personal var searchText = ""
    let searchTextPublisher = PassthroughSubject<String, By no means>()
    
    var physique: some View {
        NavigationStack {
            ZStack {
                Shade(crimson: 0.95, inexperienced: 0.95, blue: 0.97).ignoresSafeArea()
                
                VStack {
                    ResultsList(searchText: searchText, searchTextPublisher: searchTextPublisher)
                    .searchable(
                        textual content: $searchText,
                        placement: .navigationBarDrawer(displayMode: .at all times), 
                        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(Shade(crimson: 0.95, inexperienced: 0.95, blue: 0.97))
            }
        }
        .presentationDetents([.medium, .large])
        .interactiveDismissDisabled(true)
        .presentationBackgroundInteraction(.enabled)
        .onAppear {
            let look = UITabBarAppearance()
            UITabBar.look().scrollEdgeAppearance = look
        }
    }
}

struct ResultsList: View {
    var searchText: String
    var searchTextPublisher: PassthroughSubject<String, By no means>
    
    init(searchText: String, searchTextPublisher: PassthroughSubject<String, By no means>) {
        self.searchText = searchText
        self.searchTextPublisher = searchTextPublisher
        UITableView.look().sectionFooterHeight = 0
    }
    
    let outcomes = [
        SimpleTestData(score: 8, name: "Book1"),
        SimpleTestData(score: 5, name: "Book2"),
        SimpleTestData(score: 10, name: "Book3")
    ]
    
    var physique: some View {
        ScrollViewReader { proxy in
            VStack(alignment: .main, spacing: 8.0) {
                if !outcomes.isEmpty {
                    Checklist {
                        Part(header: Textual content("Outcomes")) {
                            ForEach(outcomes, id: .id) { end in
                                HStack {
                                    Textual content(end result.identify).font(.physique)
                                    Spacer()
                                    Textual content("(end result.rating)").font(.physique)
                                }
                                .listRowBackground(Shade.grey)
                                .contentShape(Rectangle())
                            }
                        }
                        
                        Part(header: Textual content("Outcomes")) {
                            ForEach(outcomes, id: .id) { end in
                                HStack {
                                    Textual content(end result.identify).font(.physique)
                                    Spacer()
                                    Textual content("(end result.rating)").font(.physique)
                                }
                                .listRowBackground(Shade.grey)
                                .contentShape(Rectangle())
                            }
                        }
                    }
                    .listStyle(.insetGrouped)
                    .foregroundColor(.black)
                    .padding([.leading, .trailing], 20.0)
                }
            }
            .padding(.horizontal, -20.0)
        }
    }
}

That is the way it seems to be with present code.

enter image description here
enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *