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")
})
}
}
}
}
}
}