0

提前感谢您提供的任何建议。我有一个在 SwiftUI 中构建的自定义下拉菜单：

struct PhoneTypeDropdown: View {
    let phoneTypes:[PhoneType] = [.Cell, .Work, .Landline]
    @State var isExpanded: Bool

    var body : some View {
        VStack (spacing: 0) {
            HStack {
                Text("select type").font(.footnote)
                Spacer()
                Image(systemName: Constants.Design.Image.IconString.ChevronDown)
                .resizable()
                    .frame(width: Constants.Design.Measurement.DropDownIconWidth,
                           height: Constants.Design.Measurement.DropDownIconHeight)
            }
            .padding(Constants.Design.Measurement.PadMin)
            .background(Constants.Design.Colors.LightGrey)
            .cornerRadius(Constants.Design.Measurement.CornerRadius)
            .onTapGesture {
                self.isExpanded.toggle()
            }
            
            if isExpanded {
                VStack (spacing: 0){
                    ForEach(0 ..< phoneTypes.count) { i in
                        Button(self.phoneTypes[i].description, action: {
                            print("button tapped")
                            self.isExpanded.toggle()
                        })
                            .buttonStyle(DropDownButtonStyle())
                        
                        if i != self.phoneTypes.count - 1 {
                            Divider()
                                .padding(.vertical, 0)
                                .padding(.horizontal, Constants.Design.Measurement.Pad)
                                .foregroundColor(Constants.Design.Colors.DarkGrey)
                        }
                    }
                }.background(Constants.Design.Colors.LightGrey)
                .cornerRadius(Constants.Design.Measurement.CornerRadiusMin)
                .padding(.top, Constants.Design.Measurement.PadMin)
            }
        }.frame(width: Constants.Design.Measurement.PhoneTypeFieldWidth)
            .cornerRadius(Constants.Design.Measurement.CornerRadius)
    }

}

当我在我看来使用它时，我曾计划将它用作这样的叠加层：

                VStack(spacing: 0) {
                    ProfileField(text: phone1,
                                 label: Constants.Content.PrimaryPhone,
                                 position: .Justified)
                        .overlay(
                            PhoneTypeDropdown(isExpanded: expandDropdown1)
                                .padding(.top, 32) //FIXME: Fix this hard-coded value.
                                .padding(.trailing, Constants.Design.Measurement.PadMax),
                            alignment: .topTrailing
                    )
                }

然而，虽然上面的代码会在点击并展开下拉框时触发，但点击下拉框内的任何Button对象都不会执行任何操作。然后我尝试使用ZStack这样的实现下拉框：

                ZStack(alignment: .topTrailing) {
                    ProfileField(text: phone1,
                                 label: Constants.Content.PrimaryPhone,
                                 position: .Justified)
                    PhoneTypeDropdown(isExpanded: expandDropdown1)
                        .padding(.top, 32) //FIXME: Fix this hard-coded value.
                        .padding(.trailing, Constants.Design.Measurement.PadMax)
                }

下拉框工作得很好，可以按预期展开和折叠。但是，现在，当它展开时，它会向下推表单的其余部分，而不是根据需要放置在表单的顶部。

ZStack那么我的问题是：当在 a 中使用下拉对象而不是将其合并到overlaya 中的视图中时，什么会导致我的按钮操作正确触发VStack？

4

0 回答 0