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

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 beneath. Nevertheless, when eradicating one of many objects within the search bar, the TextField doesn’t resize accurately and successfully inserts padding on the vanguard. When the TextField is concentrated, it resizes and fills all the area. If the “Compose” button was already hidden when the search bar is offered, it lays out accurately. How do I resize the TextField after eradicating the “Compose” button routinely?

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 {
                Checklist {
                    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(Coloration.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")
                        })
                    }
                }
            }
        }
    }
}