Question

我只是进入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)
    )

}

这是我在实时预览窗口中单击时的样子：

Answer 1

您应该删除.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)
                )

        }
    }

Answer 2

这是两个同心圆的另一种实现，在我看来更好一些。

      //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)

如何指定或更改按钮SwiftUI的可点击区域

2 个答案: