SwiftUI点击按钮动态添加训练项组件的技术问题求助

核心思路 #

SwiftUI是声明式UI框架，不能通过命令式的方式直接在按钮点击事件里创建视图。正确的做法是用状态变量管理训练项数据，UI根据数据自动渲染，点击按钮只需要更新数据即可。

具体实现步骤 #

1. 定义训练项数据模型
   创建结构体存储单个训练项的信息，借助Identifiable协议让数组遍历更便捷：

struct ExerciseItem: Identifiable {
    let id = UUID()
    var name: String
    var sets: Int
    var reps: Int
}

2. 用状态变量管理训练项数组
   在主视图中使用@State维护训练项列表，可初始化一个默认项：

@State private var exercises: [ExerciseItem] = [ExerciseItem(name: "", sets: 3, reps: 10)]

3. 封装训练项子视图
   把单个训练项的UI拆分为子视图，通过绑定传递数据以支持修改：

struct ExerciseRow: View {
    @Binding var exercise: ExerciseItem
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            TextField("训练名称", text: $exercise.name)
                .textFieldStyle(.roundedBorder)
            
            HStack(spacing: 20) {
                VStack(alignment: .leading) {
                    Text("组数")
                    Picker("", selection: $exercise.sets) {
                        ForEach(1...10, id: \.self) { num in
                            Text("\(num)组").tag(num)
                        }
                    }
                    .pickerStyle(.segmented)
                }
                
                VStack(alignment: .leading) {
                    Text("次数")
                    Picker("", selection: $exercise.reps) {
                        ForEach(5...30, id: \.self) { num in
                            Text("\(num)次").tag(num)
                        }
                    }
                    .pickerStyle(.segmented)
                }
            }
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(8)
    }
}

4. 主视图渲染与添加逻辑
   遍历训练项数组渲染子视图，点击“+”按钮时向数组追加新的训练项：

struct WorkoutView: View {
    @State private var exercises: [ExerciseItem] = [ExerciseItem(name: "", sets: 3, reps: 10)]
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 16) {
                    ForEach($exercises) { $exercise in
                        ExerciseRow(exercise: $exercise)
                    }
                    
                    Button(action: {
                        exercises.append(ExerciseItem(name: "", sets: 3, reps: 10))
                    }) {
                        HStack {
                            Image(systemName: "plus.circle.fill")
                            Text("添加训练项")
                        }
                        .font(.title2)
                        .foregroundColor(.blue)
                    }
                }
                .padding()
            }
            .navigationTitle("训练计划")
        }
    }
}

错误原因说明 #

你之前在Button的action闭包里直接创建VStack的方式不符合SwiftUI的声明式范式——UI由状态驱动，只有状态改变时SwiftUI才会重新计算body并更新视图。直接创建视图属于命令式操作，不会被渲染，因此出现“Result of 'VStack' initializer is unused”错误。

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