SwiftUI中如何创建支持泛型属性的Picker下拉菜单组件？

要让你的Picker组件支持任意类型而非固定的SelectMenuItem，可以通过泛型视图结合闭包来实现，核心是给视图添加泛型约束，并通过闭包动态获取每个选项的显示文本。

泛型版本的组件代码 #

struct SelectionMenuView<Option: Identifiable & Hashable>: View {
    let title: String
    let menuItems: [Option]
    @Binding var selectedOption: Option?
    // 闭包：传入泛型选项，返回要显示的文本
    let optionDisplay: (Option) -> String
    
    var body: some View {
        Picker(title, selection: $selectedOption) {
            Text("Placeholder")
                .foregroundStyle(.red)
                .tag(nil as Option?)
            
            ForEach(menuItems) { menuItem in
                Text(optionDisplay(menuItem))
                    .foregroundStyle(.red)
                    .tag(menuItem)
            }
        }
    }
}

关键修改说明 #

• 泛型约束：Option: Identifiable & Hashable 保证泛型类型满足Picker的selection要求（Hashable）和ForEach的遍历要求（Identifiable）。
• 显示闭包：optionDisplay 让外部决定每个选项要展示的文本，比如你可以传入自定义结构体的某个属性（如name、title等）。
• 占位符处理：给占位符绑定nil标签，配合可选类型的selectedOption，支持用户选择占位符清空选中项。

使用示例 #

假设你有一个自定义的User结构体，直接用泛型组件：

// 自定义业务模型
struct User: Identifiable, Hashable {
    let id = UUID()
    let name: String
    let age: Int
}

// 父视图中使用泛型Picker
struct ContentView: View {
    @State private var selectedUser: User?
    private let users = [
        User(name: "张三", age: 25),
        User(name: "李四", age: 30),
        User(name: "王五", age: 28)
    ]
    
    var body: some View {
        SelectionMenuView(
            title: "选择用户",
            menuItems: users,
            selectedOption: $selectedUser,
            optionDisplay: { $0.name } // 指定显示用户的name属性
        )
    }
}

可选优化：支持非Identifiable类型 #

如果你的类型不满足Identifiable，可以修改泛型约束，手动指定ForEach的id：

struct SelectionMenuView<Option: Hashable>: View {
    let title: String
    let menuItems: [Option]
    @Binding var selectedOption: Option?
    let optionDisplay: (Option) -> String
    let idKey: KeyPath<Option, some Hashable> // 手动指定id的KeyPath
    
    var body: some View {
        Picker(title, selection: $selectedOption) {
            Text("Placeholder")
                .foregroundStyle(.red)
                .tag(nil as Option?)
            
            ForEach(menuItems, id: idKey) { menuItem in
                Text(optionDisplay(menuItem))
                    .foregroundStyle(.red)
                    .tag(menuItem)
            }
        }
    }
}

// 使用时指定idKey
// SelectionMenuView(
//     title: "选择用户",
//     menuItems: users,
//     selectedOption: $selectedUser,
//     optionDisplay: { $0.name },
//     idKey: \.id
// )

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