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

Posted 2023-03-13

【中文标题】SwiftUI - 带有可点击按钮的单元格（在表单内）

【英文标题】：SwiftUI - cells (inside Form) with clickable buttons

【发布时间】：2019-06-22 12:51:14

【问题描述】：

目标：

使用按钮创建行/单元格 在表单中嵌入行/单元格

我做了什么：

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

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)
    

然后我将这个单元格放入一个表单中：

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

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

问题： 如何点击并选择按钮？ 我应该公开表单上的所有按钮（不是单元格）吗？问题是，在这种情况下，表单将拥有庞大的代码库，而我希望保持整洁有序...

【参考方案1】：

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

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

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

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

【讨论】：

啊，真烦人！

【参考方案2】：

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

.buttonStyle(PlainButtonStyle())

【讨论】：

谢谢，它可以工作，但是按钮的颜色将是黑色而不是默认的蓝色。我将样式更改为无边框按钮样式，它现在显示默认的蓝色样式。使用 xcode 12 在 ios 13,14 上测试。

这实际上应该是公认的答案，因为您仍然可以使用“按钮”。