如何创建一个在触摸时更改不透明度并触发按钮操作的 SwiftUI 按钮?

Question

我想用 SwiftUI 创建一个按钮，当我的手指触摸它时触发(就像 UIKit 向下触摸而不是向上触摸内部(。我还希望当我的手指按下按钮时，按钮的不透明度变为 0.7。而且我希望只有当我的手指不再触摸按钮时，按钮的不透明度才变回 1。

我尝试了 2 种不同类型的按钮样式来创建这样的按钮，但它们都失败了：

struct ContentView: View {  
var body: some View {  
Button(action: {  
print("action triggered")  
}){  
Text("Button").padding()  
}  
.buttonStyle(SomeButtonStyle())  
}  
}  
struct SomeButtonStyle: ButtonStyle {  
func makeBody(configuration: Self.Configuration) -> some View {  
configuration.label  
.background(Color.green)  
.opacity(configuration.isPressed ? 0.7 : 1)  
.onLongPressGesture(  
minimumDuration: 0,  
perform: configuration.trigger//Value of type 'SomeButtonStyle.Configuration' (aka 'ButtonStyleConfiguration') has no member 'trigger'  
)  
}  
}  
struct SomePrimativeButtonStyle: PrimitiveButtonStyle {  
func makeBody(configuration: Configuration) -> some View {  
configuration.label  
.background(Color.green)  
.opacity(configuration.isPressed ? 0.7 : 1)//Value of type 'SomePrimativeButtonStyle.Configuration' (aka 'PrimitiveButtonStyleConfiguration') has no member 'isPressed'  
.onLongPressGesture(  
minimumDuration: 0,  
perform: configuration.trigger  
)  
}  
}

显然，上面的按钮样式都不起作用，因为 ButtonStyle 和 PrimitiveButtonStyle 不共享相同的方法和属性，所以我不能在同一按钮样式中使用 isPressed 属性(属于 ButtonStyle(和触发器方法(属于 PrimitiveButtonStyle(。

我应该如何配置我的按钮样式才能完成这项工作？

Answer 1

好的，我知道作者只想用Button看到解决方案，所以我多挖了一点。并在 Swift UI Lab 发现了一些有趣的东西。这个想法与我的第一个答案相同：使用@GestureState并创建.updating($...)此状态的LongPressGesture。但在PrimitiveButtonStyle中，您不需要一起编写几个手势。因此，我稍微简化了代码并在模拟器上对其进行了测试。我认为现在正是作者所需要的：

struct ComposingGestures: View {
var body: some View {
Button(action: {
print("action triggered")
}){
Text("Button")
.padding()
}
.buttonStyle(MyPrimitiveButtonStyle())
}
}
struct MyPrimitiveButtonStyle: PrimitiveButtonStyle {
func makeBody(configuration: PrimitiveButtonStyle.Configuration) -> some View {
MyButton(configuration: configuration)
}
struct MyButton: View {
@GestureState private var pressed = false
let configuration: PrimitiveButtonStyle.Configuration
let color: Color = .green
@State private var didTriggered = false
var body: some View {
// you can set minimumDuration to Double.greatestFiniteMagnitude if you think that
// user can hold button for such a long time
let longPress = LongPressGesture(minimumDuration: 300, maximumDistance: 300.0)
.updating($pressed) { value, state, _ in
state = value
self.configuration.trigger()
}
return configuration.label
.background(Color.green)
.opacity(pressed ? 0.5 : 1.0)
.gesture(longPress)
}
}
}

Answer 2

我没有使用ButtonStyle，但试图用组合SwiftUI手势来解决它。我作曲TapGesture和LongPressGesture，并玩@GestureState来控制"按钮"的.opacity(这只是Text(。结果正如您所问：

struct ComposingGestures: View {
enum TapAndLongPress {
case inactive
case pressing
var isPressing: Bool {
return self == .pressing
}
}
@GestureState var gestureState = TapAndLongPress.inactive
@State private var didPress = false
var body: some View {
let tapAndLongPressGesture = LongPressGesture(minimumDuration: 2) // if minimumDuration <= 1 gesture state returns to inactive in 1 second
.sequenced(before: TapGesture())
.updating($gestureState) { value, state, transaction in
switch value {
case .first(true), .second(true, nil):
self.didPress = true // simulation of firing action
state = .pressing
default:
state = .pressing
}
}
return VStack {
Text("action was fired!")
.opacity(didPress ? 1 : 0)
Text("Hello world!")
.gesture(tapAndLongPressGesture)
.background(Color.green)
.opacity(gestureState.isPressing ? 0.7 : 1)
}
}
}

附言我玩的只是@State var didPress来展示，如何射击动作。也许最好只在第一种情况下触发它，就像这样：

// ...
.updating($gestureState) { value, state, transaction in
switch value {
case .first(true):
self.didPress = true // simulation of firing action
state = .pressing
case .second(true, nil):
state = .pressing
default:
state = .pressing
}

UPDATE在模拟器上尝试了代码并修复了两个错误：

// ...
let tapAndLongPressGesture = LongPressGesture(minimumDuration: 300, maximumDistance: 300) // now button don't return opacity to 1 even if you move your finger
// ...
case .first(true), .second(true, nil):
DispatchQueue.main.async { // now there are no purple mistakes
self.didPress = true // simulation of firing action
}
state = .pressing
// ...