forms - SwiftUI：用 VStack 包装 TextFields 后，覆盖在整个 VStack 而不是文本字段上

Question

这是简化的代码：

var body: some View {
    
    Section(header: Text("Personal Data").position(x:45, y: 17)) {
        Form {
            VStack {
                TextField("Title", text: self.$title)
                    .disabled(true)
                    .overlay(
                        Button("", action: {
                            self.showTitles = true
                            
                        }))
                    .popover(isPresented: self.$showTitles, attachmentAnchor: .point(.bottom)) { EmptyView() }
                
                Divider()
                TextField("Name", text: $firstName)
                Divider()
                TextField("Last Name", text: $lastName)
            }
            .padding()
            .padding(.bottom, -7)
            .overlay(
                RoundedRectangle(cornerRadius: 6.0)
                    .stroke(Color.secondary, lineWidth: 1.0)
                    .opacity(0.3)
            )
        }

    }
}

在添加 VStack 之前，它可以按我的意愿工作，尽管我需要它才能放置 Dividers。我试图用 VStack 包装单个 TextField 并使用 Group 来查看我是否只能在第一个 TextField 上覆盖按钮，但似乎没有任何效果。我必须为此目的使用 GeometryReader 吗？

如果有人能提供一些见解，我将不胜感激。

Answer 1

这有点棘手：

理解问题：

SwiftUI 会自动检测 的动作default button并将其用作单元格动作。所以弹出框也将作为整个列表的弹出框出现（不知何故）

解决方案

因此，您需要将其更改buttonStyle为其他内容default

TextField("Title", text: self.$title)
    .disabled(true)
    .overlay(
        Button(action: ( { showTitles.toggle() } ),
               label: ( { Text("").frame(maxWidth: .infinity, maxHeight: .infinity) } )
        ).buttonStyle(BorderlessButtonStyle())
    )
    .popover(isPresented: self.$showTitles, attachmentAnchor: .point(.bottom)) { EmptyView() }

_{请注意，我如何缩放按钮以填充整个空间}