SwiftUI如何禁止Button在自身frame范围外点击时触发动作

你当前实现的按钮点击边框外也会触发动作，核心原因有两点：

• 你给按钮的Label添加了.frame(maxWidth: .infinity)，直接把按钮的布局可交互区域拉满到父容器整行宽度，哪怕视觉上按钮是带圆角的小块，整行范围都属于按钮的可点击区域
• 没有显式指定按钮的点击识别形状，SwiftUI默认会按视图的布局矩形做点击测试，不会自动贴合你绘制的圆角边框范围

按以下规则调整代码即可：

• 移除Label上直接绑定的撑满宽度frame，改用外层HStack搭配两侧Spacer的方式实现按钮横向居中，避免按钮自身占满整行宽度
• 调整修饰符顺序，先给文字加内边距，再依次添加白色圆角背景、边框描边，保证视图的布局尺寸和视觉尺寸完全匹配
• 给按钮显式添加.contentShape(RoundedRectangle(cornerRadius: 10))，把点击识别区域严格限定在圆角矩形范围内
• 给按钮设置.buttonStyle(.borderless)，避免SwiftUI默认按钮样式自动扩张可点击区域

修复后的完整代码：

HStack {
    Spacer()
    Button(action: {
        model.addData(clubID: clubID, clubName: clubName, clubCreator: String(describing: uidx), membersLimit: membersLimit, streamingPlatforms: streamingPlatforms, streamingType: streamingType, teleClubGenres: teleClubGenres, date:  Date.getCurrentDate(), description: description, uid: String(describing: uidx) , currentMembers: [String(describing: uidx)], selectedDate: dateformatter(date: selectedDate), mediaChosen: mediaChosen, streamingPartyLink: streamingPartyLink)
        isSuccess = true
        message = "Club made successfully"
        shown.toggle()

        clubID = 0
        clubName = ""
        clubCreator = ""
        membersLimit = 0
        streamingPlatforms = 0
        streamingType = 0
        teleClubGenres = []
        date = ""
        description = ""
        uid = ""
        currentMembers = [String(describing: uidx)]
        selectedDateTwo = ""
        mediaChosen = ""
        streamingPartyLink = "https://www.teleparty.com/"
    }, label: {
        Text("Save")
            .padding()
            .foregroundColor(Color.black)
            .background(Color.white.cornerRadius(10))
            .background(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 2))
            .contentShape(RoundedRectangle(cornerRadius: 10))
    })
    .buttonStyle(.borderless)
    Spacer()
}

注意：SwiftUI的修饰符存在顺序差异，每添加一个修饰符相当于给视图包裹一层新的布局层，顺序错误就会出现视觉效果和交互范围不匹配的问题。如果后续调整了按钮的圆角、尺寸参数，记得同步更新contentShape传入的形状参数，保证两者完全一致。

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