SwiftUI如何复用带Binding变量的Picker通用视图？

当然可以实现通用Picker视图来消除重复代码，核心思路是把重复的Picker逻辑抽取成接收Binding<Int?>参数的可复用视图（或View方法），通过传入不同的绑定变量适配不同字段的选择需求。

方案一：在视图扩展中实现通用方法 #

直接在ImportDataView的扩展里定义带参数的View方法，复用Picker逻辑：

extension ImportDataView {
    @ViewBuilder
    private func chooseFieldCommonView(selectionFieldIndex: Binding<Int?>) -> some View {
        Picker(selection: selectionFieldIndex, label: EmptyView()) {
            ForEach(itVM.csvFieldNames.indices, id: \.self) { index in
                Text(itVM.csvFieldNames[index]).tag(index as Int?)
            }
        }
    }
}

同时优化ViewModel，将CSV字段名缓存为@Published属性，避免重复调用方法：

class ImportDataViewModel: ObservableObject {
    @Published var field1Index: Int?
    @Published var field2Index: Int?
    @Published var fieldNIndex: Int?
    @Published var csvFieldNames: [String] = []
    
    init() {
        csvFieldNames = getFieldNamesFromCSV()
    }
    
    private func getFieldNamesFromCSV() -> [String] {
        return ["fieldFromFile1", "fieldFromFile2", "fieldFromFileN"]
    }
}

主视图中按预期方式调用：

struct ImportDataView: View {
    @Environment(\.dismiss) var dismiss
    @EnvironmentObject var itVM: ImportDataViewModel
    
    var body: some View {
        NavigationView {
            List {
                HStack {
                    Text("Field 1  *")
                    Spacer()
                    chooseFieldCommonView(selectionFieldIndex: $itVM.field1Index)
                }
                HStack {
                    Text("Field 2  *")
                    Spacer()
                    chooseFieldCommonView(selectionFieldIndex: $itVM.field2Index)
                }
                HStack {
                    Text("Field N  *")
                    Spacer()
                    chooseFieldCommonView(selectionFieldIndex: $itVM.fieldNIndex)
                }
            }
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Back", role: .cancel) {
                        dismiss()
                    }
                }
            }
        }
    }
}

方案二：创建独立的通用Picker结构体 #

若需要跨视图复用该Picker逻辑，可定义独立的View结构体，灵活性更高：

struct CommonFieldPicker: View {
    let fieldNames: [String]
    @Binding var selection: Int?
    
    var body: some View {
        Picker(selection: $selection, label: EmptyView()) {
            ForEach(fieldNames.indices, id: \.self) { index in
                Text(fieldNames[index]).tag(index as Int?)
            }
        }
    }
}

调用方式如下：

HStack {
    Text("Field 1  *")
    Spacer()
    CommonFieldPicker(fieldNames: itVM.csvFieldNames, selection: $itVM.field1Index)
}

效果说明 #

两种方案都能彻底消除重复的Picker代码，实现一次编写、多处复用。方案二更适合跨视图复用，方案一则更贴合当前视图的局部复用需求。

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