How to set max width of searchview inside toolbar [SwiftUI] - swift

Question

I am new to SwiftUI and I trying to set maxwidth of my searchbar inside of my toolbar but the .frame(maxWidth: .infinity) won't work on my case. How can I fix this?
You can see the problem by bellow attached image, Screenshot
// this is my toolbar
My ToolbarView
NavigationView {
VStack {
contentView
}
.padding(.top, 10)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
if (hideTitleAndSearchButton) {
SearchBarView(
searchText: $viewModel.personViewModel.searchText,
hideTitleAndSearchButton: Binding(projectedValue: $hideTitleAndSearchButton),
viewModel: viewModel.personViewModel
)
.frame(maxWidth: .infinity)
.animationDisable()
}
else {
Text(title)
.font(.system(size: 32))
.bold()
}
}
ToolbarItem(placement: .navigationBarTrailing) {
if (!hideTitleAndSearchButton) {
if (viewModel.setSearchButtonVisibility) {
Image(systemName: "magnifyingglass")
.onTapGesture {
self.hideTitleAndSearchButton = true
}
.frame(width: 45, height: 45)
.foregroundColor(Color.white)
.background(Color.mPurple)
.clipShape(Circle())
.animationDisable()
}
}
}
}
}
.frame(maxWidth: .infinity)
// this is my searchview
My Searchview
var body: some View {
HStack {
Image("back_icon")
.resizable()
.renderingMode(.template)
.foregroundColor(.mPurple)
.onTapGesture {
self.isEditing = false
self.searchText = ""
self.hideTitleAndSearchButton = false
viewModel.isSearchMode = false
viewModel.isLoading = true
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
viewModel.personPopularList.removeAll()
viewModel.getPersonPopular()
}
}
.frame(width: 40, height: 40)
.animationDisable()
TextField("Search ...", text: $searchText)
.padding(7)
.padding(.horizontal, 20)
.background(Color(.systemGray6))
.cornerRadius(8)
.accentColor(.mPurple)
.frame(maxWidth: .infinity)
.onTapGesture {
self.isEditing = true
viewModel.isSearchMode = true
}.onChange(of: searchText) { searchItem in
if (!searchItem.isEmpty) {
viewModel.searchText = searchItem.lowercased()
let _ = print("searchItem true")
} else {
viewModel.isSearchMode = false
viewModel.personPopularList.removeAll()
viewModel.getPersonPopular()
let _ = print("searchItem false")
}
let _ = print("searchItemX: \(searchText)")
}
.animationDisable()
.padding(.trailing, 10)
}
}
thanks for anyone can help.

Answer 1

Add your SearchView in principal placement and don't need to set any width.
ToolbarItem(placement: hideTitleAndSearchButton ? .principal : .navigationBarLeading) {
if (hideTitleAndSearchButton) {
SearchBarView(
searchText: $viewModel.personViewModel.searchText,
hideTitleAndSearchButton: Binding(projectedValue: $hideTitleAndSearchButton),
viewModel: viewModel.personViewModel
)
.animationDisable()
}
else {
Text(title)
.font(.system(size: 32))
.bold()
}
}