SwiftUI中点击按钮向VStack动态添加视图的实现方法咨询

SwiftUI里没有直接“点击按钮添加视图”的内置函数，它的核心逻辑是数据驱动视图——视图跟着数据源变化，所以你要做的不是手动添加视图，而是维护一个训练项的数据源，点击按钮就往数据源里加条目，SwiftUI会自动帮你渲染对应的视图。

具体实现步骤如下：

1. 定义训练项的数据模型 #

先做一个结构体来存储每个训练项的三个输入值，遵循Identifiable协议让SwiftUI能区分每个条目：

struct WorkoutItem: Identifiable {
    let id = UUID()
    var exerciseName: String = ""
    var sets: String = ""
    var reps: String = ""
}

2. 维护训练项数组 #

在你的视图里用@State（简单场景）或@Published（配合ViewModel做状态管理）来存储训练项数组，这里先用@State做基础示例：

struct WorkoutTrackerView: View {
    @State private var workoutItems: [WorkoutItem] = []
    
    var body: some View {
        VStack {
            // 动态渲染所有训练项
            ForEach($workoutItems) { $item in
                HStack(spacing: 16) {
                    TextField("动作名称", text: $item.exerciseName)
                        .textFieldStyle(.roundedBorder)
                    TextField("组数", text: $item.sets)
                        .textFieldStyle(.roundedBorder)
                        .keyboardType(.numberPad)
                    TextField("次数", text: $item.reps)
                        .textFieldStyle(.roundedBorder)
                        .keyboardType(.numberPad)
                }
                .padding(.horizontal)
            }
            
            // 添加训练项按钮
            Button("添加训练项") {
                workoutItems.append(WorkoutItem())
            }
            .padding()
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            
            Spacer()
        }
        .padding(.top)
    }
}

关键逻辑说明 #

• 点击按钮时，只是往workoutItems数组里添加一个空的WorkoutItem实例，SwiftUI检测到数组变化后，会自动通过ForEach渲染新的HStack。
• 用$workoutItems绑定数组，每个TextField直接关联对应训练项的属性，用户输入的内容会自动存在数组里，无需额外处理存储逻辑。
• 如果需要跨页面共享训练数据，可把@State换成@Published配合ObservableObject实现ViewModel模式。

扩展提示 #

如果需要持久化用户输入的训练数据，后续可以把数组转成JSON存入UserDefaults，或者用Core Data做本地存储，核心的动态添加视图逻辑已经完成，剩下的可根据需求扩展功能。

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