使两个按钮充当一个SwiftUI 使用自定义形状的解决方案

如何解决使两个按钮充当一个SwiftUI 使用自定义形状的解决方案

我想使两个按钮充当一个按钮，或者有一个按钮，但是触摸区域只有图片中红色区域。普通按钮在触摸区域上还会有我不希望放置x-es的空白区域。

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Spacer()
            
            Button(action: {}) {
                Text("This is button 1")
                    .frame(width: 100,height: 200)
                    .background(Color.red)
            }
            
            Button(action: {}) {
                Text("This is button 2")
                    .frame(height: 100)
                    .background(Color.red)
            }
            
            Spacer()
        }
    }
}

解决方法

这是可以完成的一种方法。一个按钮带有两个覆盖的白色矩形。只能单击红色区域：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Spacer()
            
            Button(action: {}) {
                Text("This is one big button")
                .frame(width: 200,height: 200)
                .background(Color.red)
            }
            .overlay(
                HStack {
                    Spacer()
                    VStack {
                        Rectangle()
                            .frame(width: 100,height: 50)
                            .foregroundColor(.white)
                        Spacer()
                        Rectangle()
                            .frame(width: 100,height: 50)
                            .foregroundColor(.white)
                    }
                }
            )
        
            Spacer()
        }
    }
}

---

使用自定义形状的解决方案

另一种方法是为Shape创建自定义Button，然后使用它来绘制和设置其contentShape()：

struct ButtonShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.width
        let height = rect.height
        
        path.move(to: CGPoint(x: 0,y: 0))
        path.addLine(to: CGPoint(x: width/2,y: height/4))
        path.addLine(to: CGPoint(x: width,y: 3 * height/4))
        path.addLine(to: CGPoint(x: width/2,y: height))
        path.addLine(to: CGPoint(x: 0,y: height))
        path.closeSubpath()
        
        return path
    }
}

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Spacer()
            
            Button(action: {}) {
                Color.red
                    .clipShape(ButtonShape())
                    .overlay(
                        Text("This is one big button")
                    )
            }
            .contentShape(ButtonShape())
            .frame(width: 200,height: 200)
        
            Spacer()
        }
    }
}

此解决方案总体上效果更好，因为未绘制裁剪区域，因此可以更轻松地将此按钮放置在彩色背景上。