> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/action/add-item-to-list.md).

# add item to list

[SwiftUI](/ios/swiftui.md) ⟩ [view](/ios/swiftui/view.md) ⟩ [state](/ios/swiftui/view/state/value.md) ⟩ [actions](/ios/swiftui/view/action.md) ⟩ add item to list

{% tabs %}
{% tab title="💾 程式" %}
📁 ContentView

```swift
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

```swift
// ⭐️ 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
}
```

{% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩ 
  * [Collection Containers](https://developer.apple.com/documentation/swiftui/collection-containers) ⟩ 
    * [DynamicViewContent](https://developer.apple.com/documentation/swiftui/dynamicviewcontent) (protocol)
    * [ForEach](https://developer.apple.com/documentation/swiftui/foreach) ⟩ [DynamicViewContent Implementations](https://developer.apple.com/documentation/swiftui/foreach/dynamicviewcontent-implementations)
      * [onDelete(perform:)](https://developer.apple.com/documentation/SwiftUI/ForEach/onDelete\(perform:\))
  * State and Data Flow ⟩
    * [EnvironmentValues](https://developer.apple.com/documentation/swiftui/environmentvalues) ⟩ [dismiss](https://developer.apple.com/documentation/swiftui/environmentvalues/dismiss) -> [DismissAction](https://developer.apple.com/documentation/swiftui/dismissaction)
  * [App Structure and Behavior](https://developer.apple.com/documentation/swiftui/app-structure-and-behavior) ⟩
    * [DismissAction](https://developer.apple.com/documentation/swiftui/dismissaction) (<mark style="color:red;">**struct**</mark>) - defines a [`callAsFunction()`](https://developer.apple.com/documentation/swiftui/dismissaction/callasfunction\(\)) method
* SwiftOnTap ⟩&#x20;
  * [DynamicViewContent](https://swiftontap.com/dynamicviewcontent) ⟩ [onDelete(perform:)](https://swiftontap.com/dynamicviewcontent/ondelete\(perform:\)) -> <mark style="color:red;">**some**</mark> [DynamicViewContent](https://swiftontap.com/dynamicviewcontent)
  * View ⟩ [toolbar(content:)](https://swiftontap.com/view/toolbar\(content:\)-643fd)
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] Swift Playgrounds 4.1 (Keep Going with Apps) - Sharing Data Between Views.
  {% endtab %}
  {% endtabs %}