英文:
Swiftui button press does not always work
问题
当我按下按钮“获取新连接 PIN”时，它并不总是打印到控制台。好像我必须多次按下按钮，它才会打印到控制台，或者我才能看到按钮明显被按下。
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("连接 PIN：")
.font(.headline)
.foregroundColor(.gray)
Button(action: {
print("复制连接 PIN 到剪贴板")
}) {
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("请求新的连接 PIN")
}) {
Text("获取新的连接 PIN")
}
.frame(maxWidth: .infinity, minHeight: 40)
.buttonStyle(PlainButtonStyle())
.background(Color.blue)
.cornerRadius(4)
.contentShape(Rectangle()) // 让整个按钮可点击
}
.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))
}
}
英文:
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))
}
}
答案1
得分: 0
.contentShape(Rectangle()) // Make the entire button tappable 并没有实际实现你想要的效果，文本仍然是按钮中唯一可点击的部分。
修复方法是在 Button 的 Label 内部而不是按钮上应用尺寸转换。
例如（有几种方法可以实现）：
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()) // 使整个按钮可点击
}
.buttonStyle(PlainButtonStyle())
更多信息请参考这里：https://stackoverflow.com/questions/57333573/swiftui-button-tap-only-on-text-portion
这篇博文 也有一个相当不错的解释。
然而，以下方法会更简单地实现几乎相同的效果，而且你可以让操作系统选择尺寸和颜色（尽管它仅在 iOS 15+ 中可用）：
Button("Get New Connection Pin", action: {
print("Requesting a new connection pin")
})
.tint(.blue)
.controlSize(.large)
.buttonStyle(.borderedProminent)
英文:
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: https://stackoverflow.com/questions/57333573/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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论