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.

CodePudding user response：

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