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

时间:2020-09-23 20:08:41

标签: swift swiftui swiftui-button

在此先感谢您提供任何建议。我有一个在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)
                }

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

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

0 个答案:

没有答案