SwiftUI中如何创建带内置搜索栏的可搜索Picker菜单

问题根源 #

原生Picker的.menu样式会把内部所有视图都当成可选择的菜单项，点击搜索栏时会触发菜单的选择逻辑，直接关闭菜单，自然没法聚焦输入框。

解决方案：自定义带搜索的下拉菜单 #

放弃原生Picker的.menu样式，自己实现下拉弹窗，完全控制交互逻辑，避免搜索栏被当成菜单项。

1. 调整视图模型（复用原有逻辑） #

先确保视图模型里有过滤列表的逻辑：

class AccountViewModel: ObservableObject {
    @Published var selectedAccountProvider: String?
    @Published var searchBarText = ""
    @Published var accountProviders: [AccountProvider] = []
    
    // 根据搜索文本过滤提供商
    var filteredProviders: [AccountProvider] {
        searchBarText.isEmpty ? accountProviders : accountProviders.filter {
            $0.name?.lowercased().contains(searchBarText.lowercased()) ?? false
        }
    }
}

struct AccountProvider: Identifiable {
    let id: String
    let name: String?
}

2. 实现自定义下拉菜单视图 #

struct BankPickerView: View {
    @ObservedObject var viewModel: AccountViewModel
    @State private var isMenuOpen = false
    
    var body: some View {
        Group {
            Text("Select Bank")
                .font(.subheadline)
                .bold()
            
            // 自定义菜单触发按钮，替代原生Picker
            Button(action: { isMenuOpen.toggle() }) {
                HStack {
                    Text(viewModel.selectedAccountProvider ?? "Link Bank Account")
                        .foregroundColor(.black)
                    Image(systemName: "chevron.down")
                        .foregroundColor(.black)
                }
                .padding(.vertical, 8)
                .padding(.horizontal, 12)
                .background(Color(.systemGray6))
                .cornerRadius(8)
            }
            // 下拉弹窗，包含搜索栏和过滤列表
            .popover(isPresented: $isMenuOpen, arrowEdge: .top) {
                VStack(spacing: 12) {
                    // 搜索栏，不会被当成菜单项
                    SearchBarView(text: $viewModel.searchBarText, placeholderText: "Search")
                        .padding(.horizontal)
                    
                    // 实时更新的过滤选项列表
                    List(viewModel.filteredProviders) { provider in
                        if let name = provider.name {
                            Button(action: {
                                viewModel.selectedAccountProvider = provider.id
                                isMenuOpen = false
                            }) {
                                Text(name)
                            }
                        }
                    }
                    .listStyle(.plain)
                }
                .frame(width: 300, height: 400)
            }
        }
    }
}

// 通用搜索栏实现
struct SearchBarView: View {
    @Binding var text: String
    let placeholderText: String
    
    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundColor(.gray)
            
            TextField(placeholderText, text: $text)
                .foregroundColor(.black)
            
            if !text.isEmpty {
                Button(action: { text = "" }) {
                    Image(systemName: "xmark.circle.fill")
                        .foregroundColor(.gray)
                }
            }
        }
        .padding(.vertical, 8)
        .padding(.horizontal, 12)
        .background(Color(.systemGray6))
        .cornerRadius(8)
    }
}

3. 核心优化点 #

• 用Button+popover替代原生Picker，完全掌控菜单的显示/隐藏逻辑
• 搜索栏独立于选项列表，点击时正常聚焦输入框，不会触发菜单关闭
• 通过视图模型的filteredProviders实时更新选项列表，实现搜索过滤
• 选项点击逻辑和原生Picker一致：选中后更新值并关闭菜单

内容的提问来源于stack exchange，提问作者Bhimashankar