SwiftUI中如何用变量生成Form列表？代码问题排查与解决

核心问题 #

你的代码无法正常显示数组内容，根源在于**ForEach的使用方式错误**。SwiftUI的ForEach需要遍历的元素遵循Identifiable协议，或者手动指定唯一标识（id）。直接遍历[String]数组时，必须明确告诉ForEach如何区分每个元素。

修复步骤 #

1. 修正ForEach的写法
   将原来的ForEach(textItems) {textItems in替换为：

   ForEach(textItems, id: \.self) { item in
       HStack{
           Text(item)
       }
   }
   

   这里id: \.self表示用字符串本身作为唯一标识（前提是数组中没有重复的字符串，如果有重复，建议改用自定义Identifiable结构体）。同时把循环变量名从textItems改成item，避免和数组变量名冲突，提升代码可读性。

2. 可选优化：添加后清空输入框
   在updateTextItems方法里添加一行代码，清空输入框，提升用户体验：

   private func updateTextItems(){
       guard !enteredText.isEmpty else { return } // 可选：避免添加空字符串
       textItems.append(enteredText)
       enteredText = "" // 清空输入框
       print("---------------")
       for i in textItems {
           print(i)
       }
       print("---------------")
   }
   

完整修复后的代码 #

struct ContentView: View {
    @State var enteredText = ""
    @State var textItems: [String] = []
    
    private func updateTextItems(){
        guard !enteredText.isEmpty else { return }
        textItems.append(enteredText)
        enteredText = ""
        print("---------------")
        for i in textItems {
            print(i)
        }
        print("---------------")
    }
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Add Item to Array")) {
                    VStack {
                        TextField("Enter Text", text: $enteredText)
                        Button("Save", action: updateTextItems)
                            .buttonStyle(.bordered)
                    }
                    Section(header: Text("Items")){
                        ForEach(textItems, id: \.self) { item in
                            HStack{
                                Text(item)
                            }
                        }
                    }
                }
            }
            .navigationTitle("Array Test")
        }
    }
}

额外说明 #

如果你的数组可能包含重复字符串，建议定义一个遵循Identifiable的结构体来存储数据，示例如下：

struct TextItem: Identifiable {
    let id = UUID()
    let content: String
}

// 然后修改State变量：
@State var textItems: [TextItem] = []

// 添加元素时：
textItems.append(TextItem(content: enteredText))

// ForEach遍历：
ForEach(textItems) { item in
    Text(item.content)
}

这种方式更可靠，不会因为重复元素导致UI渲染异常。

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