在SwiftUI的HStack内部为列表项声明@State变量时遇到ViewBuilder错误

这个问题我太熟悉啦！你遇到的错误是因为SwiftUI的ViewBuilder闭包（比如HStack、VStack这类容器的内容闭包）不允许直接在里面声明属性——它只负责组合View，不能包含变量定义代码。

错误原因 #

@State变量是属于某个View的私有状态，你现在试图把它放在列表项的闭包里，而这个闭包是用来构建View结构的，不是用来定义View属性的地方，所以编译器就抛出了Closure containing a declaration cannot be used with result builder 'ViewBuilder'这个错误。

解决方案：封装独立子View #

正确的做法是把每个列表项封装成一个独立的子View，把@State变量放在这个子View内部。这样每个列表项都会有自己独立的状态，完全符合SwiftUI的状态管理逻辑。

错误代码示例（你当前的写法）

// 假设你有一个Item数组
struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    let items = [Item(name: "项1"), Item(name: "项2"), Item(name: "项3")]
    
    var body: some View {
        List(items) { item in
            HStack {
                // ❌ 错误：在ViewBuilder闭包里声明@State变量
                @State var imageName: String = "uncheckedIcon"
                Image(imageName)
                    .onTapGesture {
                        imageName = imageName == "uncheckedIcon" ? "checkedIcon" : "uncheckedIcon"
                    }
                Text(item.name)
            }
        }
    }
}

修正后的代码

首先创建独立的列表项子View：

struct ListItemView: View {
    let item: Item
    // ✅ 把@State变量放在子View内部，每个实例拥有独立状态
    @State private var imageName: String = "uncheckedIcon"
    
    var body: some View {
        HStack {
            Image(imageName)
                .onTapGesture {
                    imageName = imageName == "uncheckedIcon" ? "checkedIcon" : "uncheckedIcon"
                }
            Text(item.name)
        }
    }
}

然后在主View中使用这个子View：

struct ContentView: View {
    let items = [Item(name: "项1"), Item(name: "项2"), Item(name: "项3")]
    
    var body: some View {
        List(items) { item in
            ListItemView(item: item)
        }
    }
}

额外说明 #

这样每个ListItemView实例都有自己的imageName状态，点击时只会改变当前项的图标，不会影响其他列表项。这也是SwiftUI推荐的组件化方式，把复杂的View拆分成小的、独立的子View，状态和View绑定在一起，代码也更清晰易维护。

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