将 TextField 连接到 SwiftUI 中的每个列表项

问题描述 投票:0回答:1

我真的很抱歉问这个愚蠢的问题,但是如何将 TextField 分配给列表中的每个项目?目前我知道 TextField 没有连接到任何项目,因此当您添加项目并尝试输入一些输入时,它会同时编辑所有文本字段。谢谢

> //CONTENT 
> 
> import SwiftUI
> 
> struct ContentView: View {
>     @StateObject private var vm = ViewModel()
>     @State private var textField = ""
>     @State private var localArray: [Item] = []
>     var body: some View {
>         VStack {
>             List(vm.itemList) { item in
>                 Text(item.name)
>                 TextField("Assign the value", text: $textField)
>             }
>             .listStyle(.plain)
>             .background(.thinMaterial)
>             Button("Add item") {
>                 vm.addItem()
>             }
>             .padding()
>         }
>     } }
> 
> #Preview {
>     ContentView() }
> 
> 
> // VIEW MODEL 
> 
> import Foundation import SwiftUI
> 
> extension ContentView {
>     @MainActor class ViewModel: ObservableObject {
>         
>         @Published var itemList = [Item]()
>         
>         let randomItems = ["Create a variables called greeting and assign the value Hello",
>                            "Create a constant called car and assign bmw to it",
>                            "Create an integer and assign number 25",
>                            "Create a double and assign 1.50"]
>        
>         func addItem() {
>             guard let item = randomItems.randomElement() else { return }
>             let newItem = Item(name: item)
>             withAnimation {
>                 itemList.insert(newItem, at: 0)
>             }
>         }
>     } }
> 
> 
> // MODEL 
> 
> import Foundation
> 
> struct Item: Identifiable, Codable {
>     var id = UUID()
>     var name: String
>     var description: String? }
swift swiftui
1个回答
1
投票

您很可能希望将每个文本字段绑定到

Item
中的属性,例如
description
。 删掉就好了

@State private var textField = ""

并将

List
更改为

List($vm.itemList) { $item in
    Text(item.name)                
    TextField("Assign the value", text: $item.description)
}

注意:在这种情况下,

description
必须是非可选的。

© www.soinside.com 2019 - 2024. All rights reserved.