SwiftUI 如何阻止 Button 在其框架之外触发？

Question

我试图阻止以下按钮在单击边框外部时触发，并且仅在单击框架内部时触发操作。

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

Answer 1

并且只有在框架内点击时才触发动作

按钮中文本的最后一个修饰符是

.frame(maxWidth: .infinity, alignment: .center)

。

因此，因为您将

maxWidth

设置为

.infinity

，所以按钮具有无限框架。这意味着只有在框架内部单击时才会触发操作 IS，但您将框架设置为无限，因此单击 anywhere 都会触发该操作。

因为你使框架无限，所以你也使操作区域无限，这就是为什么单击“任何地方”都会触发你的按钮。

Answer 2

我遇到了这个问题，并能够通过

.clipped().buttonStyle(BorderlessButtonStyle())

修复它

Button(action: {
    //action
}, label: {
    Text("Click").clipped().buttonStyle(BorderlessButtonStyle())
}).clipped().buttonStyle(BorderlessButtonStyle()) 

Answer 3

我想你想要这个

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 !!