Ios 制作两个按钮作为一个快捷键

我想使两个按钮作为一个，或有一个单一的按钮，但与触摸区只有一个红色的区域，如图所示。一个普通的按钮也会在我放置x-E的触摸区域有一个空白区域，这是我不想要的

---

这里有一种方法可以做到。有一个带有两个重叠的白色矩形的单个按钮。只能单击红色区域：

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()
        }
    }
}

---

使用自定义形状的解决方案 另一种方法是为

按钮

创建一个自定义

形状

，然后使用它来绘制和设置其

内容形状（）

这个解决方案总体上效果更好，因为没有绘制裁剪区域，因此更容易将此按钮放置在彩色背景上。
我修复了第一个解决方案。我对第一个解决方案有一个问题/观察，似乎不知何故，矩形宽度实际上不是100点（即使在视觉上是100点）。在矩形的左边距上，按钮仍然会对触摸做出反应，即使它被矩形覆盖。您是对的，在第一种解决方案中，按钮所有边上的触摸边界都更宽。在第二种情况下，触摸边界正是绘制的边界。我说不出为什么。看来第二个问题也是一样的，不管怎样，干得好，谢谢！
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()
        }
    }
}

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: 0))
        path.addLine(to: CGPoint(x: width/2, y: height/4))
        path.addLine(to: CGPoint(x: width, y: height/4))
        path.addLine(to: CGPoint(x: width, y: 3 * height/4))
        path.addLine(to: CGPoint(x: width/2, 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()
        }
    }
}