Question

我尝试在我的应用程序中实现一个搜索栏（使用 swiftUI），它在我构建应用程序时显示。但是，它不允许我在实际的文本字段中输入。我的代码如下。我一直在寻找这个问题的解决方案，但似乎在我的代码中看不到任何问题。我的 TextField 有问题吗？

搜索栏代码 -

import SwiftUI

struct SearchBar: View {
    @Binding var text: String
    @State private var isEditing = false
    
    var body: some View {
        HStack {
            TextField("Search...", text: $text)
      
               // .foregroundColor(Color("Teal"))
               // .background(Color("Grey"))
        
                
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(Color(UIColor.systemGray3))
                            .frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
                            .padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
                        // Search icon
                        
                        if isEditing {
                            Button(action: {
                                self.text = ""
                            }, label: {
                                Image(systemName: "multiply.circle")
                                    .foregroundColor(Color(UIColor.systemGray3))
                                    .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
                                // Delete button
                            })
                        }
                    }
                ).onTapGesture {
                    self.isEditing = true
                }
            
            if isEditing{
                Button(action: {
                    self.isEditing = false
                    
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    // Hide delete button when search bar is not selected
                }){
                }
            }
        }
    }
}

在我的视图中实现搜索栏的代码 -


import SwiftUI

struct BusinessList: View {
    
    @EnvironmentObject var modelData: ModelData
    @State private var showFavoritesOnly = false
    @State var searchText = ""
    
    var filteredBusinesses: [Business] {
        modelData.businesses.filter { business in
            (!showFavoritesOnly || business.isFavorite)
        }
    }
    
    
    var body: some View {
        
        NavigationView {
            ScrollView {
                LazyVStack {
                    
                    VStack {
                        
                        SearchBar(text: $searchText)
                            .padding(.bottom)
                            .padding(.top)
                            .padding(.top)
                            .padding(.top)
                            .padding(.top)
// Search bar won't show text when 'typed into'
                            
                        
                        ScrollView(.horizontal, showsIndicators: false) {
                            HStack {
                                Button(action: {
                                    showFavoritesOnly = true
                                }) {
                                    Text("Favourites")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                        .padding(EdgeInsets.init(top: 0, leading: 20, bottom: 0, trailing: 0))
                                }
                                Button(action: {
                                   
                                }) {
                                    Text("Hospitality")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                                Button(action: {
                                   
                                }) {
                                    Text("Retail")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 100.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                                Button(action: {
                                    
                                }) {
                                    Text("Lifestyle")
                                        .font(.caption)
                                        .fontWeight(.medium)
                                        .foregroundColor(Color.white)
                                        .frame(width: 110.0, height: 30)
                                        .background(Color("Teal"))
                                        // How the button looks
                                        .cornerRadius(25)
                                        .zIndex(1)
                                        .textCase(.uppercase)
                                }
                            }
                            .padding(.bottom)
                        }
                    }
                    .background(Color(UIColor.white))
                    .shadow(radius: 6)
                    .padding(.bottom)
                    
                    ForEach(filteredBusinesses) { business in
                        NavigationLink(destination: BusinessDetail(business: business)) {
                            BusinessRow(business: business)
                        }
                        
                    }
                    
                }
                
            }
            .navigationBarHidden(true)
            .ignoresSafeArea()
            
            
        }
        
    }
    
    
}
struct BusinessList_Previews: PreviewProvider {
    static var previews: some View {
        BusinessList()
    }
}

Answer 1

您的代码对我有用，对颜色进行了细微的更改，没什么大不了的。也许颜色没有显示你的打字，但文本在那里。这是我做的测试：

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
} 
struct SearchBar: View {
    @Binding var text: String
    @State private var isEditing = false
    
    var body: some View {
        HStack {
            TextField("Search...", text: $text)
       //         .foregroundColor(Color("Teal"))
       //         .background(Color("Grey"))

                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
                            .padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
                        // Search icon
                        
                        if isEditing {
                            Button(action: {
                                self.text = ""
                            }, label: {
                                Image(systemName: "multiply.circle")
                                    .foregroundColor(.gray)
                                    .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
                                // Delete button
                            })
                        }
                    }
                ).onTapGesture {
                    self.isEditing = true
                }
            
            if isEditing{
                Button(action: {
                    self.isEditing = false
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    // Hide delete button when search bar is not selected
                }){
                }
            }
        }
    }
}

struct ContentView: View {
    @State var searchText = ""
    var body: some View {
        SearchBar(text: $searchText)
            .frame(width: 222, height: 55).padding(.horizontal, 20)
            .border(.red)
    }
}

编辑：

当你删除时，你的新代码对我有用

.shadow(radius: 6)

和

.ignoresSafeArea()

我的搜索栏中的文本字段不允许输入文本 (swiftUI)

1 个答案: