SwiftUI中List内Button点击动画仅随机触发的问题修复咨询

你的问题出在List行的默认交互与.plain样式Button的动画逻辑冲突，同时Button内部视图未明确设置点击区域，导致部分点击事件被List行拦截，进而出现动画随机触发的情况。以下是两种可行的修复方案：

方案一：调整按钮样式与点击区域 #

通过设置contentShape确保整个按钮区域可点击，同时改用.borderless按钮样式避免与List行交互冲突：

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("hello")
            }) {
                ZStack {
                    Image("art")
                        .resizable()
                        .scaledToFill()
                    Text("hi")
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .foregroundColor(.white)
                        .font(.headline)
                        .padding(
                            EdgeInsets(top: 45, leading: 15, bottom: 5, trailing: 5)
                        )
                }
                .frame(height: 90)
                .listRowInsets(EdgeInsets())
                .cornerRadius(20)
                .padding(.horizontal, 40)
                .contentShape(Rectangle()) // 确保整个区域都是按钮点击范围
            }
            .buttonStyle(.borderless) // 替换为borderless样式，避免与List行冲突
        }
    }
}

方案二：自定义按钮样式（完全掌控动画） #

如果需要更定制化的高亮效果，可以自定义按钮样式，手动控制点击状态的动画：

struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.7 : 1) // 点击时降低透明度模拟灰化
            .scaleEffect(configuration.isPressed ? 0.98 : 1) // 可选：添加缩放动画增强反馈
    }
}

struct ContentView: View {
    var body: some View {
        List {
            Button(action: {
                print("hello")
            }) {
                ZStack {
                    Image("art")
                        .resizable()
                        .scaledToFill()
                    Text("hi")
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .foregroundColor(.white)
                        .font(.headline)
                        .padding(
                            EdgeInsets(top: 45, leading: 15, bottom: 5, trailing: 5)
                        )
                }
                .frame(height: 90)
                .listRowInsets(EdgeInsets())
                .cornerRadius(20)
                .padding(.horizontal, 40)
                .contentShape(Rectangle())
            }
            .buttonStyle(CustomButtonStyle()) // 使用自定义样式
            .listRowBackground(Color.clear) // 移除List行默认背景，避免干扰
        }
    }
}

这两种方案都能确保每次点击按钮时稳定触发灰化动画，同时不影响action的执行。

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