SwiftUI How to stop Button from triggering outside of its frame?-CodePudding

I'm trying to stop the following button from triggering when clicking outside of the border and only trigger the action when clicking inside the frame.

          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(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 2).background(Color.white.cornerRadius(10))).frame(maxWidth: .infinity, alignment: .center)
                                
                 
                            })

CodePudding user response：

and only trigger the action when clicking inside the frame

The last modifier on the text in your button is .frame(maxWidth: .infinity, alignment: .center).

So, because you set maxWidth to .infinity, the button has an infinite frame. This means that the action IS only being triggered when clicking inside the frame, but you set the frame to be infinite, and so clicking anywhere will trigger the action.

Because you made the frame infinite, you're making the action area infinite, too, which is why clicking "anywhere" will trigger your button.

CodePudding user response：

I assume you wanted this

Button(action: {
    // ... action here
}, label: {
    Text("Save").padding()
        .foregroundColor(Color.black)
        .background(
           RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 2)
              .background(Color.white.cornerRadius(10))
        )
})
.frame(maxWidth: .infinity, alignment: .center)    // << here !!