SwiftUI实现点击按钮或下拉图标触发Picker选择器的问题

解决方法 #

问题根源是自定义下拉图标和Picker是平级关系，不属于Picker的可点击交互区域，只要把下拉图标放到Picker的label参数的HStack容器内即可，整个文本+图标区域都会触发Picker弹出。

修改后的完整代码：

enum ProfileRelationshipSignUp: String {
    case NONE = "Choose"
    case FATHER = "Father"
    case MOTHER = "Mother"
    case GUARDIAN = "Guardian"
    case RELATIVE = "Relative"
    case CHILD = "Child"
    case SIBLING = "Sibling"
    case COLLEAGUE = "Colleague"
    case SPOUSE = "Spouse"
}

struct RelationShipView: View {
    @State var selectedRelationship: ProfileRelationshipSignUp = .NONE
    // 原有逻辑中的microAppViewModel、indexValue、valueSize请确保已正确传值

    var body: some View {
        VStack {
            HStack {
                Picker(selection: $selectedRelationship, label: HStack(alignment: .top, spacing: 5) {
                    Text(microAppViewModel.users[indexValue].relationshipLabel)
                        .foregroundColor(.gray)
                        .font(Font.custom("Lato-Regular", size: valueSize))
                    // 下拉图标移到Picker的label内部，成为可点击区域的一部分
                    Image("DropDown")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 12, height: 12, alignment: .center)
                        .padding(.top, 5)
                }, content: {
                    Text("Choose").tag(ProfileRelationshipSignUp.NONE)
                    Text("Mother").tag(ProfileRelationshipSignUp.MOTHER)
                    Text("Father").tag(ProfileRelationshipSignUp.FATHER)
                    Text("Guardian").tag(ProfileRelationshipSignUp.GUARDIAN)
                    Text("Relative").tag(ProfileRelationshipSignUp.RELATIVE)
                    Text("Child").tag(ProfileRelationshipSignUp.CHILD)
                    Text("Sibling").tag(ProfileRelationshipSignUp.SIBLING)
                    Text("Colleague").tag(ProfileRelationshipSignUp.COLLEAGUE)
                    Text("Spouse").tag(ProfileRelationshipSignUp.SPOUSE)
                })
                .onChange(of: selectedRelationship, perform: { value in
                    // 原有switch逻辑可简化为一行，直接取枚举rawValue赋值即可
                    microAppViewModel.users[indexValue].relationshipLabel = value.rawValue
                }).onAppear(perform: {
                    selectedRelationship = ProfileRelationshipSignUp(rawValue: microAppViewModel.users[indexValue].relationshipLabel) ?? .NONE
                })
                .pickerStyle(MenuPickerStyle())
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            }
            Divider()
                .frame(height: 1.0)
        }
    }
}

如果确实需要将图标放在Picker外部，可改用Menu组件手动包裹选择项和触发区域，实现成本高于上述方案，无特殊需求优先选择把图标移入label的方案。

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