When I press the button "Get New Connection Pin" it does not always print to console. Let's like I have to press the button a few times before it will print to console or for me to see the button visibly being pressed.
swiftui:
import SwiftUI
struct JokeView: View {
@State private var jokeString = "No Joke Available"
@State private var fetching = false
var body: some View {
VStack(spacing: 20) {
VStack(alignment: .leading, spacing: 10) {
Text("Connection Pin:")
.font(.headline)
.foregroundColor(.gray)
Button(action: {
print("Copy Connection Pin to clipboard")
}) {
Text("3kus-32dak")
.fontWeight(.semibold)
.frame(maxWidth: .infinity, alignment: .leading)
}
.cornerRadius(8)
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(Color.gray.opacity(0.2))
.cornerRadius(8)
Button(action: {
print("Requesting a new connection pin")
}) {
Text("Get New Connection Pin")
}
.frame(maxWidth: .infinity, minHeight: 40)
.buttonStyle(PlainButtonStyle())
.background(Color.blue)
.cornerRadius(4)
.contentShape(Rectangle()) // Make the entire button tappable
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
}
}
struct JokeView_Previews: PreviewProvider {
static var previews: some View {
JokeView()
.frame(width: 225, height: 225)
.background(Color.white.opacity(0.1))
}
}
Running your code, seems that .contentShape(Rectangle()) // Make the entire button tappable
is not actually accomplishing what you want it to accomplish and the text is still the only tappable portion of the button.
Fix is to apply your sizing transformations on the Text
inside the Button
Label
instead of to the button.
For example (you could do it in a few ways):
Button(action: {
print("Requesting a new connection pin")
}) {
Text("Get New Connection Pin")
.frame(maxWidth: .infinity, minHeight: 40)
.background(Color.blue)
.cornerRadius(4)
.contentShape(Rectangle()) // Make the entire button tappable
}
.buttonStyle(PlainButtonStyle())
More in here: SwiftUI Button tap only on text portion
This blog post has a pretty good explanation too.
However, the following would be much simpler to accomplish more or less the same thing, plus you let the OS choose the sizes / colours somewhat (though it's only available in iOS 15+):
Button("Get New Connection Pin", action: {
print("Requesting a new connection pin")
})
.tint(.blue)
.controlSize(.large)
.buttonStyle(.borderedProminent)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With