在SwiftUI中，为什么我的按钮包含在ZStack中但不在VStack的叠加层中触发？

问题描述

在此先感谢您提供任何建议。我有一个在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,position: .Justified)
                    PhoneTypeDropdown(isExpanded: expandDropdown1)
                        .padding(.top,32) //FIXME: Fix this hard-coded value.
                        .padding(.trailing,Constants.Design.Measurement.PadMax)
                }

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

然后我的问题是：在{{1}的视图中使用下拉对象而不是将其合并到ZStack的视图中时，是什么导致我的按钮动作正确触发的？ }}？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）