Ios 如何指定或更改按钮快捷界面的可单击区域

我刚刚进入SwiftUI的世界，所以我不知道这个问题是否有一个非常明显的答案，但基本上我已经创建了一个按钮，并试图使按钮成为两个同心圆。然而，一旦我在模拟器上运行我的代码，我发现我可以点击屏幕上的任何地方，按钮就会被“按下”（我使用打印语句对其进行了测试）。我想把按钮的可点击区域限制在圆圈的区域，或者是两个圆圈之间的正方形区域

这是我的密码：

    Button(action: {
    print("Do Something")

}) {
    
    Circle().stroke(Color.white, lineWidth: 3)
        .frame(width: 65, height: 65)
        .position(x: x, y: y)
        .overlay(
            Circle().stroke(Color.white, lineWidth: 3)
                .frame(width: 55, height: 55)
                .position(x: x, y: y)
    )

}

这是我在“实时预览”窗口中单击它时的外观：

---

您应该删除

.position

修改器，因为它将视图位置（在您的示例中为按钮内容）切换为全局坐标

而是使用按堆栈布局，如下所示

    VStack {
        Spacer()          // << pushes button down
        Button(action: {
            print("Do Something")

        }) {

            Circle().stroke(Color.white, lineWidth: 3)
                .frame(width: 65, height: 65)
                .overlay(
                    Circle().stroke(Color.white, lineWidth: 3)
                        .frame(width: 55, height: 55)
                )

        }
    }

VStack{
Spacer（）/这里是两个同心圆的另一个实现，在我看来，这两个同心圆看起来更好一些

      //Red Button Elements
            ZStack(alignment: .center){
                VStack {
                    Spacer()          // << pushes button down
                    Button(action: {
                        print("Press Circle")
                        
                    }) {
                        
                        Circle().stroke(Color.white, lineWidth: 40)
                            .frame(width: 200, height: 200)
                            .overlay(
                                Circle().stroke(Color.red, lineWidth: 100)
                                    .frame(width: 100, height: 100)
                            )
                            .foregroundColor(/*@START_MENU_TOKEN@*/.red/*@END_MENU_TOKEN@*/).padding(.bottom, 100.0)
                        
                    }
                }
                
            }
            .padding(.all)

//红色按钮元素
ZStack（对齐：。中心）{
VStack{
垫片（）//谢谢您的快速响应。我试图使按钮与屏幕底部保持一定距离，并使其位于x轴的中心。您的代码将按钮一直推到屏幕底部，因此我在VStack中添加了一个“.offset”，以将按钮向上移动一点，似乎可以工作。请改用一些变体of
.padding（）
，因为.offset不会更改布局，因此您可能会在以后得到意外的重叠。我将.offset更改为.padding并使其正常工作。但是，您代码中的VStack似乎从屏幕底部延伸到顶部，与按钮的宽度相同。我是否有办法更改代码以获得VStack，从而使其仅y包含按钮而没有其他内容？我必须在此按钮上方添加其他视图，因此将VStack限制在按钮上会很有帮助。应该有一些用于对齐子视图的根容器…如果您需要上面的内容，请使用ZSTACK。您应该保留
VStack
，并在以后添加其他元素时更新布局。您可以不要在therms中考虑UIKit如何工作的布局，因为您将遇到很多问题。相反，请尝试考虑如何将提供的容器（
VStack
，
HStack
，
ZStack
）与
Spacer（）
和
padding（）结合使用
为了创建所需的总体布局，请尽量让视图自行调整大小。每当您试图与系统抗争时，您都会让自己变得更加困难。