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 之前按我想要的方式工作，尽管我需要它能够放置分隔线。我尝试用 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() }

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

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

SwiftUI: Overlay is on the whole VStack instead of the textfield after wrapping TextFields with VStack

forms

overlay

view

swiftui

vstack

了解问题：

解决方案