SwiftUI点击按钮在视图中新增空文本输入框的实现方法

你当前的代码仅用单个String类型的状态变量存储输入内容，只能适配单个输入框的场景。要实现动态新增输入框，只需把存储结构改为数组，配合ForEach循环渲染所有输入框即可，具体修改如下：

核心修改点 #

• 将单个食材的状态变量改为字符串数组，初始值放1个空字符串，对应初始加载的1个输入框
• 用ForEach循环遍历数组，批量生成输入框，每个输入框绑定数组对应位置的元素
• 点击加号按钮时只需向数组追加1个空字符串，SwiftUI会自动渲染新增的输入框

完整可运行代码 #

struct TestView: View {
    // 改为数组存储所有食材名称，初始带1个空值对应初始输入框
    @State private var ingredients: [String] = [""]

    var body: some View {
        // 用VStack纵向排列所有输入行
        VStack(spacing: 12) {
            ForEach(ingredients.indices, id: \.self) { index in
                HStack {
                    TextField("请输入食材名称", text: $ingredients[index])
                    // 只有最后一行显示加号按钮，也可以按需调整显示规则
                    if index == ingredients.count - 1 {
                        Button(
                            action: {
                                // 追加空字符串触发新输入框渲染
                                ingredients.append("")
                            },
                            label: {
                                Image(systemName: "plus.circle")
                                    .foregroundColor(.black)
                            }
                        )
                    }
                }
            }
        }
        .padding(.horizontal, 16)
    }
}

可选扩展 #

如果需要支持删除单个输入框，可在每行增加减号按钮，点击时移除数组对应索引的元素即可，注意逻辑上保留至少1个输入框避免全删。

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