如何从外部控制自定义SwiftUI切换按钮的状态并更新UI？

你遇到的问题根源在于子视图的@State是内部私有状态，外部直接修改无法触发SwiftUI的UI更新机制，而且@State设计上就是用来管理视图内部的临时状态，不适合跨视图控制。要实现一键关闭所有按钮，需要把状态控制权转移到父视图或统一的ViewModel中，通过绑定同步子视图状态。

方案一：父视图维护状态数组 + @Binding #

1. 修改AudioToggleButton，用@Binding接收外部状态 #

把原来的@State private var toggled = false替换为@Binding var toggled: Bool，让子视图的状态和父视图同步：

struct AudioToggleButton: View {
    let iconString: String
    @Binding var toggled: Bool

    var body: some View {
        Button(action: {
            toggled.toggle()
        }) {
            Image(systemName: iconString)
                .frame(width: 70, height: 70)
                .foregroundColor(toggled ? .white : Color(UIColor.lightGray))
                .background(toggled ? .black : .white)
                .font(.title)
                .clipShape(Circle())
                .overlay(
                    Circle()
                        .stroke(toggled ? Color(UIColor.darkGray) : Color(UIColor.lightGray), lineWidth: 6)
                )
                .padding(4)
        }
    }
}

2. 在ContentView中管理所有按钮状态并实现一键关闭 #

用@State数组保存每个按钮的状态，创建按钮时绑定对应索引的状态，一键关闭按钮直接将数组所有元素设为false：

struct ContentView: View {
    // 根据按钮数量初始化状态数组，示例为3个按钮
    @State private var buttonStates = [false, false, false]

    var body: some View {
        VStack(spacing: 16) {
            AudioToggleButton(iconString: "speaker.fill", toggled: $buttonStates[0])
            AudioToggleButton(iconString: "headphones", toggled: $buttonStates[1])
            AudioToggleButton(iconString: "mic.fill", toggled: $buttonStates[2])

            Button("关闭所有") {
                buttonStates = buttonStates.map { _ in false }
            }
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

方案二：ObservableObject统一管理状态（适合大量按钮场景） #

如果按钮数量较多或需要更复杂的状态逻辑，用ViewModel统一管理更清晰：

1. 创建ViewModel类 #

class AudioButtonViewModel: ObservableObject {
    @Published var buttonStates: [Bool]

    init(buttonCount: Int) {
        buttonStates = Array(repeating: false, count: buttonCount)
    }

    // 一键关闭所有按钮的方法
    func turnOffAllButtons() {
        buttonStates = buttonStates.map { _ in false }
    }
}

2. 在ContentView中使用ViewModel #

struct ContentView: View {
    // 初始化ViewModel，指定按钮数量
    @StateObject private var viewModel = AudioButtonViewModel(buttonCount: 3)

    var body: some View {
        VStack(spacing: 16) {
            ForEach(0..<viewModel.buttonStates.count, id: \.self) { index in
                AudioToggleButton(iconString: getIcon(for: index), toggled: $viewModel.buttonStates[index])
            }

            Button("关闭所有") {
                viewModel.turnOffAllButtons()
            }
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }

    // 根据索引返回对应图标，可根据实际需求修改
    private func getIcon(for index: Int) -> String {
        switch index {
        case 0: return "speaker.fill"
        case 1: return "headphones"
        case 2: return "mic.fill"
        default: return "circle"
        }
    }
}

两种方案的核心逻辑一致：将状态从子视图转移到外部（父视图/ViewModel），通过@Binding让子视图与外部状态双向绑定，这样外部修改状态时，所有子视图会自动触发UI更新。

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