SwiftUI中如何将按钮点击区域限制为其形状与标签范围？

问题根源 #

你的代码里有两个关键问题导致点击区域异常：

1. NavigationStack嵌套错误：你把NavigationStack放在VStack内部，导致它会占据VStack的全部可用空间，按钮的点击区域被无形拉伸
2. 未限制按钮的点击区域：SwiftUI默认Button的点击范围会扩展到父视图的可用空间，需要显式指定点击区域为按钮的形状

修复后的代码 #

import SwiftUI

struct ContentView: View {
    @State var showSecondView: Bool = false
    @State var showThirdView: Bool = false
    
    var body: some View {
        // 把NavigationStack作为根容器，而不是嵌套在VStack里
        NavigationStack {
            ZStack {
                VStack(spacing: 25) { // 直接用VStack的spacing控制按钮间距，去掉多余的Spacer
                    // PLAY BUTTON
                    Button {
                        showSecondView.toggle()
                    } label: {
                        Text("Play")
                            .font(.custom("Helvetica Neue", size: 25))
                            .bold()
                            .padding(.horizontal, 40)
                            .padding(.vertical, 10)
                            .background(.pink)
                            .foregroundColor(.white)
                            .cornerRadius(25)
                    }
                    // 显式设置点击区域为胶囊形状，限制在按钮可视范围内
                    .contentShape(Capsule())
                    .navigationDestination(isPresented: $showSecondView) {
                        SecondView()
                    }

                    // HOW TO PLAY BUTTON
                    Button {
                        showThirdView.toggle()
                    } label: {
                        Text("How To Play")
                            .font(.custom("Helvetica Neue", size: 25))
                            .bold()
                            .padding(.horizontal, 20)
                            .padding(.vertical, 10)
                            .foregroundColor(.white)
                            .background(.pink)
                            .cornerRadius(25)
                    }
                    .contentShape(Capsule())
                    .navigationDestination(isPresented: $showThirdView) {
                        ThirdView()
                    }
                }
            }
        }
    }
}

关键修改点 #

• 调整NavigationStack位置：将NavigationStack作为整个视图的根容器，避免它占用VStack的多余空间导致按钮点击区域被拉伸
• 添加.contentShape(Capsule())：强制按钮的点击区域和它的胶囊形状完全匹配，点击形状外的空白区域不再触发按钮
• 简化布局：用VStack的spacing参数控制按钮间距，移除多余的Spacer().frame(height:25)，让布局更简洁

内容的提问来源于stack exchange，提问作者Jack