SwiftUI - 带有可点击按钮的单元格（表单内）

Question

目标：

1. 创建带有按钮的行/单元格
2. 在表单中嵌入行/单元格

我做了什么：

1. 我创建了一个带有按钮的单元格。

struct PointTypeButtons : View {
    var body: some View {
        
        VStack {
            HStack {
                Text("Aligment")
                    .font(.subheadline)
                Spacer()
            }
            
            HStack {
                
                Button(action: {}) {
                    Image(systemName: "text.alignleft")
                        .padding(.horizontal, 25.0)
                        .padding(.vertical)
                        .background(Color.black)
                        .cornerRadius(4)
                }
                Button(action: {}) {
                    Image(systemName: "text.aligncenter")
                        .padding(.horizontal, 25.0)
                        .padding(.vertical)
                        .background(Color.black)
                        .cornerRadius(4)
                }
                Button(action: {}) {
                    Image(systemName: "text.aligncenter")
                        .padding(.horizontal, 25.0)
                        .padding(.vertical)
                        .background(Color.black)
                        .cornerRadius(4)
                }
                Button(action: {}) {
                    Image(systemName: "text.alignright")
                        .padding(.horizontal, 25.0)
                        .padding(.vertical)
                        .background(Color.black)
                        .cornerRadius(4)
                }
            }
        }
        .frame(height: nil)
    }
}

2. 然后我把这个单元格放入一个表单中：

struct ToolbarBezier : View {
    var body: some View {
        HStack {
            Spacer()
            
            Form {
                PointTypeButtons()
            }
            .frame(width: 320.0)
            
        }
    }
}

问题：当我点击时，我现在选择了整个单元格，而不是按钮。

问：如何点击并选择按钮？我应该公开表单上的所有按钮（不是单元格）吗？问题是，在这种情况下，表单将有一个巨大的代码库，我想让事情保持干净和有条理......

Answer 1

从 beta 5 开始，SwiftUI 会将任何View包含 a 的内容Button视为“表单按钮”。这意味着整个单元格成为可点击的目标。根据我的经验，如果您有多个按钮，它似乎选择最后一个按钮。

要解决此问题，您可以选择根本不使用按钮。相反，使用onTapGesture()事件来检测点击。

这是您的相同图像按钮，但已转换为可点击的图像。前景色来自按钮样式，因此您现在必须明确定义它。

Image(systemName: "text.alignleft")
    .foregroundColor(Color.accentColor)
    .padding(.horizontal, 25.0)
    .padding(.vertical)
    .background(Color.black)
    .cornerRadius(4)
    .onTapGesture {
        print("align left tapped")
    }

Answer 2

只需添加到您的视图（PointTypeButtons），并且将识别表单内的每个按钮点击

.buttonStyle(PlainButtonStyle())