🔰add item to list

SwiftUI ⟩ view ⟩ state ⟩ actions ⟩ add item to list

📁 ContentView

List {
    // assume `data` is an environment object
    ForEach(data.creatures) { creature in 
        CreatureRow(creature: creature)
    }
}
// ⭐️ add toolbar item "New" to navigation bar
.toolbar { 
    ToolbarItem { 
        NavigationLink("New") { 
            // new data item editor view
            CreatureEditor()
                .navigationTitle("+ Creature")
        }
    }
}

📁 CreatureEditor

// ⭐️ new data item editor view
struct CreatureEditor: View {
    
    // ⭐️ get environment object
    @EnvironmentObject var data: CreatureZoo
    
    // ⭐️ new data item (a state value)
    @State private var creature = Creature(name: "untitled", emoji: "❓")
    
    // ⭐️⭐️⭐️ 啟用關閉此 view 的功能（事後用 dismiss() 關閉）
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack(alignment: .leading) {
            // ⭐️ UI to update data item
            Form {
                Section("Name") {
                    TextField("name", text: $creature.name)
                }   
                Section("Emoji") {
                    TextField("emoji", text: $creature.emoji)
                }
                Section("Creature Preview") {
                    CreatureRow(creature: creature)
                }
            }
        }// VStack
        // ⭐️ add toolbar item "Add" to navigation bar
        .toolbar { 
            ToolbarItem { 
                Button("Add") { 
                    // when button is tapped:
                    data.creatures.append(creature)  // ⭐️ add item to data
                    dismiss()                        // ⭐️ dismiss this view
                }
            }
        }
        
    }// body
}
Previousdelete item from listNextview environment

Last updated

Was this helpful?