Because .searchable does not allow for customizing buttons in the search bar, I've manually had to recreate the search bar as shown below. However, when removing one of the items in the search bar, the TextField does not resize correctly and effectively inserts padding on the leading edge. When the TextField is focused, it resizes and fills the entire space. If the "Compose" button was already hidden when the search bar is presented, it lays out correctly. How do I resize the TextField after removing the "Compose" button automatically?
Thanks, jjp
struct ContentView: View {
@State var isSearchBarVisible = false
@State var isComposingMessage = false
@State var searchText = ""
let items: [String] = ["hey", "there", "how", "are", "you"]
var searchItems: [String] {
items.filter { item in
item.lowercased().contains(searchText.lowercased())
}
}
var body: some View {
NavigationStack {
VStack {
List {
if !searchText.isEmpty {
ForEach(searchItems, id: \.self) { item in
Text(item)
}
} else {
ForEach(items, id: \.self) { item in
Text(item)
}
}
}
}
.toolbar {
if isSearchBarVisible {
ToolbarItem(placement: .principal) {
TextField("Search", text: $searchText)
.padding(8)
.background(Color.gray.opacity(0.2))
}
ToolbarItem(placement: .topBarTrailing) {
Button(action: {
isSearchBarVisible = false
},[![enter image description here][1]][1]
label: {
Text("Cancel")
})
}
if !isComposingMessage {
ToolbarItem(placement: .topBarTrailing) {
Button(action: {
isComposingMessage.toggle()
},
label: {
Text("Compose")
})
}
}
}
else {
ToolbarItem(placement: .topBarLeading) {
Button(action: {
isSearchBarVisible = true
},
label: {
Text("Search")
})
}
ToolbarItem(placement: .principal) {
Text("Title")
}
ToolbarItem(placement: .topBarTrailing) {
Button(action: {
isComposingMessage.toggle()
},
label: {
Text("Compose")
})
}
}
}
}
}
}
Selecting any option will automatically load the page