SwiftUI中如何通过外部按钮修改LazyVGrid内按钮状态？

你的核心问题在于ButtonCell用@State管理的isEnabled是视图内部状态，父视图ContentView无法直接修改子视图的局部状态；而且点击"Change isEnabled state"按钮时，你只是新建了几个ButtonCell实例，这些和界面上已经渲染出来的按钮完全是不同的对象，自然不会有任何效果。

下面提供两种可行的解决方案：

方案一：用@Binding将状态提升到父视图 #

把所有按钮的状态统一放在ContentView中管理，通过@Binding传递给子视图，这样父视图就能直接操控子视图的状态：

修改步骤 #

• 在ContentView中添加数组，存储每个按钮的启用状态
• 将ButtonCell的@State替换为@Binding
• 在LazyVGrid中传递对应的绑定值
• 修改按钮action，直接操作状态数组

完整代码

struct ContentView: View {
    // 存储10个按钮的状态，初始全为false
    @State private var buttonStates = Array(repeating: false, count: 10)
    
    var body: some View {
        let columns = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
        ScrollView {
            LazyVGrid(columns: columns, spacing: 0) {
                ForEach(0..<10) { number in
                    // 传递绑定值给子视图
                    ButtonCell(value: number + 1, isEnabled: $buttonStates[number])
                }
            }
        }
        Button(action: {
            // 修改对应位置的按钮状态（value=1对应索引0，value=2对应索引1）
            buttonStates[0] = true
            buttonStates[1] = true
        }){
            Rectangle()
                .frame(width: 200, height: 50)
                .cornerRadius(10)
                .shadow(color: .black, radius: 3, x: 1, y: 1)
                .padding()
                .overlay(
                    Text("Change isEnabled state").foregroundColor(.white)
                )
        }
    }
    
    struct ButtonCell: View {
        var value: Int
        // 用@Binding接收父视图传递的状态
        @Binding var isEnabled: Bool
        
        var body: some View {
            Button(action: {
                print(value)
                print(isEnabled)
                isEnabled = true
            }) {
                Rectangle()
                    .foregroundColor(isEnabled ? Color.red : Color.yellow)
                    .frame(width: 50, height: 50)
                    .cornerRadius(10)
                    .shadow(color: .black, radius: 3, x: 1, y: 1)
                    .padding()
                    .overlay(
                        Text("\(value)").foregroundColor(.white)
                    )
            }
        }
    }
}

方案二：用ObservableObject管理全局状态 #

如果按钮数量可能动态变化，或者需要更复杂的状态逻辑，推荐用ViewModel统一管理：

修改步骤 #

• 创建继承自ObservableObject的ViewModel类，用@Published标记状态数组
• 在ContentView中初始化ViewModel
• 传递绑定值给ButtonCell
• 操作ViewModel中的状态数组

完整代码

import SwiftUI

// 统一管理按钮状态的ViewModel
class ButtonViewModel: ObservableObject {
    @Published var buttonStates: [Bool] = Array(repeating: false, count: 10)
}

struct ContentView: View {
    @StateObject private var viewModel = ButtonViewModel()
    
    var body: some View {
        let columns = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
        ScrollView {
            LazyVGrid(columns: columns, spacing: 0) {
                ForEach(0..<10) { number in
                    ButtonCell(value: number + 1, isEnabled: $viewModel.buttonStates[number])
                }
            }
        }
        Button(action: {
            // 通过ViewModel修改状态
            viewModel.buttonStates[0] = true
            viewModel.buttonStates[1] = true
        }){
            Rectangle()
                .frame(width: 200, height: 50)
                .cornerRadius(10)
                .shadow(color: .black, radius: 3, x: 1, y: 1)
                .padding()
                .overlay(
                    Text("Change isEnabled state").foregroundColor(.white)
                )
        }
    }
    
    struct ButtonCell: View {
        var value: Int
        @Binding var isEnabled: Bool
        
        var body: some View {
            Button(action: {
                print(value)
                print(isEnabled)
                isEnabled = true
            }) {
                Rectangle()
                    .foregroundColor(isEnabled ? Color.red : Color.yellow)
                    .frame(width: 50, height: 50)
                    .cornerRadius(10)
                    .shadow(color: .black, radius: 3, x: 1, y: 1)
                    .padding()
                    .overlay(
                        Text("\(value)").foregroundColor(.white)
                    )
            }
        }
    }
}

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