SwiftUI中如何实现自定义按钮的按压与释放状态动画？

问题根源 #

你当前使用onLongPressGesture的核心问题在于：该手势默认带有1秒左右的长按阈值，超过阈值后会自动重置按压状态，导致按住1秒后按钮恢复默认样式；同时它会抢占手势识别优先级，和onTapGesture无法共存。

方案一：用DragGesture+TapGesture实现精准控制 #

放弃onLongPressGesture，改用DragGesture监听按压开始/结束，配合TapGesture处理点击动作，完全自主控制状态：

struct ButtonIcon: View {
    // Public Variables
    let resource: ImageResource
    let action: () -> Void // 外部传入点击动作
    
    // Private Variables
    @State private var isPressed = false
    
    var body: some View {
        ZStack {
            Image(resource)
                .resizable()
                .scaledToFit()
                .frame(width: 24, height: 24)
                .scaleEffect(isPressed ? 1.1 : 1)
        }
        .padding(12)
        .scaleEffect(isPressed ? 0.8 : 1)
        .animation(.smooth(duration: 0.2), value: isPressed) // 基于状态变化的自动动画
        // 监听按压/释放状态
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in
                    guard !isPressed else { return }
                    isPressed = true
                }
                .onEnded { _ in
                    isPressed = false
                }
        )
        // 优先处理点击动作
        .highPriorityGesture(
            TapGesture()
                .onEnded {
                    action()
                }
        )
    }
}

// 使用示例
ButtonIcon(resource: YourImageResource) {
    print("按钮被点击")
}

关键改进点：

• DragGesture(minimumDistance: 0)：无需手指移动，触摸瞬间就触发按压状态
• 状态控制：isPressed仅在首次触摸时设为true，手指松开时重置为false，彻底解决按住1秒恢复的问题
• highPriorityGesture：确保点击动作能被优先识别，和按压动画互不干扰
• 基于状态的动画：替代withAnimation，更符合SwiftUI的状态驱动设计

方案二：自定义ButtonStyle（更简洁的官方推荐方式） #

利用SwiftUI原生Button的ButtonStyle协议，系统会自动处理按压状态和点击动作，无需手动管理手势：

struct IconButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        ZStack {
            configuration.label
                .scaleEffect(configuration.isPressed ? 1.1 : 1)
        }
        .padding(12)
        .scaleEffect(configuration.isPressed ? 0.8 : 1)
        .animation(.smooth(duration: 0.2), value: configuration.isPressed)
    }
}

// 使用示例
Button(action: {
    print("按钮被点击")
}) {
    Image(YourImageResource)
        .resizable()
        .scaledToFit()
        .frame(width: 24, height: 24)
}
.buttonStyle(IconButtonStyle())

优势：

• 完全复用系统Button的交互逻辑，无需自己处理手势冲突、状态重置等细节
• 代码更简洁，符合SwiftUI的设计范式
• 自动支持无障碍功能（如VoiceOver）

两种方案对比 #

内容的提问来源于stack exchange，提问作者Ilja