SwiftUI中如何识别被点击按钮ID实现仅该按钮触发动画

所有循环生成的按钮共用了同一个@State布尔值buttonBackgroundColorRed，只要这个值发生变化，所有依赖该值计算背景色的按钮都会被SwiftUI标记为需要更新，withAnimation会自动对所有受这次状态变化影响的视图施加动画，自然就出现了点一个按钮全部播动画的问题。

根据你需要的交互逻辑二选一即可：

• 单选交互：同一时间最多只有一个按钮为红色，点其他按钮切换选中态
• 独立切换交互：每个按钮的颜色状态互不影响，点哪个只切换哪个的颜色

方案1：单选场景实现 #

用一个值存储当前选中的按钮序号，每个按钮仅判断自身序号是否和选中值匹配，状态变化时只有新旧两个选中按钮会触发动画：

import SwiftUI

struct ContentView: View {
    // 存储当前选中的按钮编号，初始为nil代表无选中
    @State private var selectedNum: Int? = nil
    
    var body: some View {
        VStack {
            ForEach(1..<4) { num in
                Button {
                    withAnimation {
                        selectedNum = num
                    }
                } label: {
                    Text("Button \(num)")
                }
                .padding(10)
                .background(selectedNum == num ? .red : .blue)
                .foregroundColor(.white)
                .padding()
            }
        }
    }
}

方案2：独立切换场景实现 #

如果需要每个按钮可以独立切换颜色、互不干扰，把按钮拆分为独立子视图、让子视图自己持有本地状态即可，这种方式也能避免父视图维护数组状态容易出现的索引错位问题：

import SwiftUI

struct SingleAnimatedButton: View {
    let buttonNum: Int
    @State private var isRedBackground = false
    
    var body: some View {
        Button {
            withAnimation {
                isRedBackground.toggle()
            }
        } label: {
            Text("Button \(buttonNum)")
        }
        .padding(10)
        .background(isRedBackground ? .red : .blue)
        .foregroundColor(.white)
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(1..<4) { num in
                SingleAnimatedButton(buttonNum: num)
            }
        }
    }
}

避坑提示：不要在父视图定义[Bool]类型的数组存每个按钮的状态，通过数组索引去读写对应按钮的状态——一旦ForEach的数据源顺序变化、或者增删元素，很容易出现状态和按钮错位的问题，拆分子视图持有本地状态是更符合SwiftUI设计规范的做法。

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