SwiftUI中如何为List内的按钮添加点击动画效果？

问题场景 #

在List中使用默认Button时，仅按压瞬间会有背景变化，松开后立即恢复，无法实现点击后背景持续变化的效果。自定义简单的ButtonStyle无法达成预期，因为仅依赖configuration.isPressed只能捕获按压状态，无法持久化点击后的状态。

解决方案 #

通过绑定状态变量记录每个按钮的点击状态，配合自定义ButtonStyle，并清除List单元格的默认样式干扰，实现点击后背景立即变化并保持的效果：

完整代码示例 #

struct ContentView: View {
    // 用数组记录每个按钮的点击状态（对应List中的多个按钮）
    @State private var buttonStates = [false, false]
    
    var body: some View {
        List {
            ForEach(0..<buttonStates.count, id: \.self) { index in
                Button(action: {
                    // 切换当前按钮的点击状态
                    buttonStates[index].toggle()
                }) {
                    Text("Button")
                }
                .buttonStyle(CustomClickButtonStyle(isClicked: buttonStates[index]))
                .listRowBackground(Color.clear) // 清除单元格默认背景，避免干扰
                .listRowInsets(EdgeInsets()) // 移除单元格内边距，让按钮填满整个单元格
            }
        }
    }
}

// 自定义ButtonStyle，结合按压状态和点击状态控制背景
struct CustomClickButtonStyle: ButtonStyle {
    let isClicked: Bool
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, maxHeight: .infinity) // 让按钮占满单元格空间
            .background(
                // 优先响应按压状态，松开后根据点击状态保持背景色
                configuration.isPressed ? Color.gray : (isClicked ? Color.gray : Color.white)
            )
            .foregroundColor(.black)
    }
}

关键说明 #

1. 状态持久化：使用@State变量记录按钮的点击状态，替代仅依赖configuration.isPressed（该值仅在按压时为true，松开即重置）。
2. 清除List默认样式：通过listRowBackground(Color.clear)和listRowInsets(EdgeInsets())消除List单元格的默认背景和内边距，确保按钮的背景变化完全覆盖单元格区域。
3. 按压反馈保留：在ButtonStyle中优先判断configuration.isPressed，保证按压时的即时反馈依然存在，松开后切换到持久化的点击状态背景。

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