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

Posted 2023-02-24

【中文标题】如何指定或更改按钮 SwiftUI 的可点击区域

【英文标题】：How to specify or change the clickable area of a button SwiftUI

【发布时间】：2020-08-06 15:18:51

【问题描述】：

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

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

【参考方案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)
                )

        
    

【讨论】：

感谢您的快速回复。我试图让按钮与屏幕底部有一定距离，并在 x 轴的中心。您的代码将按钮一直推到屏幕底部，因此我在 VStack 中添加了一个“.offset”以将按钮向上移动一点，它似乎可以工作。

改用.padding() 的一些变体，因为.offset 不会改变布局，所以你以后可能会出现意外的重叠。

我将 .offset 更改为 .padding 并让它工作。但是，您的代码中的 VStack 似乎从屏幕底部延伸到顶部，与按钮的宽度相同。我有什么办法可以更改代码以获取 VStack，使其仅包含按钮而没有其他内容？我必须在此按钮上方添加其他视图，因此将 VStack 限制在按钮上会很有帮助。

应该有一些用于对齐子视图的根容器...如果您需要上述内容，请使用 ZStack

您应该保留VStack 并在稍后添加其他元素时更新布局。你不应该考虑 UIKit 如何工作的布局，因为你会遇到很多问题。相反，请尝试考虑如何将提供的容器（VStack、HStack、ZStack）与Spacer() 和.padding() 结合使用，以创建您需要的整体布局。尽量让视图自己调整大小。每当你试图与系统抗争时，都会让自己变得更加困难。

【参考方案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)