ios – When eradicating a ToolbarItem from the navigation bar, how do I make the remaining ToolbarItems resize appropriately?

0
1
ios – When eradicating a ToolbarItem from the navigation bar, how do I make the remaining ToolbarItems resize appropriately?


As a result of .searchable doesn’t permit for customizing buttons within the search bar, I’ve manually needed to recreate the search bar as proven under. Nevertheless, when eradicating one of many objects within the search bar, the TextField doesn’t resize appropriately and successfully inserts padding on the vanguard. When the TextField is targeted, it resizes and fills your entire area. If the “Compose” button was already hidden when the search bar is offered, it lays out appropriately. How do I resize the TextField after eradicating the “Compose” button robotically?

Thanks,
jjp

struct ContentView: View {
    @State var isSearchBarVisible = false
    @State var isComposingMessage = false
    @State var searchText = ""

    let objects: [String] = ["hey", "there", "how", "are", "you"]

    var searchItems: [String] {
        objects.filter { merchandise in
            merchandise.lowercased().incorporates(searchText.lowercased())
        }
    }

    var physique: some View {
        NavigationStack {
            VStack {
                Record {
                    if !searchText.isEmpty {
                        ForEach(searchItems, id: .self) { merchandise in
                            Textual content(merchandise)
                        }
                    } else {
                        ForEach(objects, id: .self) { merchandise in
                            Textual content(merchandise)
                        }
                    }
                }
            }
            .toolbar {
                if isSearchBarVisible {
                    ToolbarItem(placement: .principal) {
                        TextField("Search", textual content: $searchText)
                            .padding(8)
                            .background(Colour.grey.opacity(0.2))
                    }
                    ToolbarItem(placement: .topBarTrailing) {
                        Button(motion: {
                            isSearchBarVisible = false
                        },[![enter image description here][1]][1]
                               label: {
                            Textual content("Cancel")
                        })
                    }
                    if !isComposingMessage {
                        ToolbarItem(placement: .topBarTrailing) {
                            Button(motion: {
                                isComposingMessage.toggle()
                            },
                                   label: {
                                Textual content("Compose")
                            })
                        }
                    }
                }
                else {
                    ToolbarItem(placement: .topBarLeading) {
                        Button(motion: {
                            isSearchBarVisible = true
                        },
                               label: {
                            Textual content("Search")
                        })
                    }
                    ToolbarItem(placement: .principal) {
                        Textual content("Title")
                    }
                    ToolbarItem(placement: .topBarTrailing) {
                        Button(motion: {
                            isComposingMessage.toggle()
                        },
                               label: {
                            Textual content("Compose")
                        })
                    }
                }
            }
        }
    }
}

images

image2

image3

image4

LEAVE A REPLY

Please enter your comment!
Please enter your name here