# List

[SwiftUI](..) ⟩ [lists]() ⟩ List&#x20;

{% hint style="success" %}
A <mark style="color:purple;">List</mark> <mark style="color:yellow;">displays any number of</mark> [views](../view) <mark style="color:yellow;">in a scrolling vertical column</mark>, optionally providing the ability to select one or more members.
{% endhint %}

```swift
// ⭐️ list consisting of a single type
List(1..<5) { Text("Item \($0)") }
List(names, id: \.self) { Text("Item \($0)") }

// ⭐️ static subviews
List {
    Text("1")
    Text("2")
    Text("3")
}

// ⭐️ static & dynamic subviews
List {
    
    // ⭐️ static
    Toggle(isOn: $showFavoritesOnly) {
        Text("Favorites Only")
    }
    
    // ⭐️ dynamic
    ForEach(filteredLandmarks) { landmark in
        NavigationLink {
            LandmarkDetail(landmark: landmark)
        } label: {
            LandmarkRow(landmark: landmark)
        }
    }
    
}.navigationTitle("Landmarks")
```

{% tabs %}
{% tab title="🔴" %}
* [liststyle](list/liststyle "mention")
* [list-vs.-foreach](../view/grouping/foreach/list-vs.-foreach "mention")
* [grouping](../view/grouping "mention")
* [list-background-color](list/list-background-color "mention") - <img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FzJzotE9va1aQNQHsn47o%2Fios16.png?alt=media&#x26;token=eff3bd53-7b9a-446e-b520-a188840e050c" alt="" data-size="line">
{% endtab %}

{% tab title="👥" %}
* [liststyle](list/liststyle "mention")
* [navigationview](../deprecated/navigationview "mention")
* [binding](../view/state/binding/binding "mention")
* [seq.grouped-by](../../swift/collections/sequence/seq.grouped-by "mention") - 將 Array 變成 Dictionary
* can add [section](../control/section "mention") header/footer.
* [grouping](../view/grouping "mention")
* [foreach](../view/grouping/foreach "mention")
{% endtab %}

{% tab title="⭐️" %}
{% hint style="info" %}
To combine <mark style="color:red;">**static**</mark> and <mark style="color:red;">**dynamic**</mark> views in a **List**, or to combine two or more different **groups** of **dynamic views**, use the <mark style="color:red;">**ForEach**</mark> type instead of passing your collection of data to <mark style="color:red;">**List**</mark>.

:point\_right: SwiftUI Tutorials ⟩ [Handling User Input](https://developer.apple.com/tutorials/swiftui/handling-user-input) ⟩ Sec. 3: [Add a Control to Toggle the State](https://developer.apple.com/tutorials/swiftui/handling-user-input#Add-a-Control-to-Toggle-the-State)
{% endhint %}

#### List vs. ForEach

{% hint style="info" %}
* <mark style="color:red;">**ForEach**</mark> is a view that lets you pass a **collection of data** to its initializer and then creates multiple "**subviews**" from the closure you provide.
* [**List**](list) is a view that can **compose multiple views** together, but **not** necessarily views **of the same type**. You can simply add multiple views without any loop.
* As a _convenience_, the [**List**](list) [initializer](https://developer.apple.com/documentation/swiftui/list/init\(_:rowcontent:\)-3vn6i) allows you to use it just like the <mark style="color:red;">**ForEach**</mark> view in case you want to have a list consisting **of a single type** only.
{% endhint %}

| Container | 可容納不同類的項目 | 可捲動 |
| --------- | --------- | --- |
| List      | ✅         | ✅   |
| ForEach   | ❌         | ❌   |
{% endtab %}

{% tab title="📗" %}
* [ ] Paul ⟩ [Working with Identifiable items in SwiftUI](https://www.hackingwithswift.com/books/ios-swiftui/working-with-identifiable-items-in-swiftui)
* [ ] Sarun ⟩&#x20;
  * [ ] [List view, a UITableView equivalent in SwiftUI](https://sarunw.com/posts/list-view-uitableview-equivalent-in-swiftui/)
  * [ ] [How to change SwiftUI list row background color](https://sarunw.com/posts/swiftui-list-row-background-color/)
  * [ ] [How to change List Row separator color in SwiftUI](https://sarunw.com/posts/swiftui-list-row-separator-color/)
{% endtab %}

{% tab title="📘" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Lists](https://developer.apple.com/documentation/swiftui/lists) ⟩ [List](https://developer.apple.com/documentation/swiftui/list)
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Collection Containers](https://developer.apple.com/documentation/swiftui/collection-containers) ⟩ [List](https://developer.apple.com/documentation/swiftui/list) (<mark style="color:red;">**struct**</mark>)
  * [View Modifiers](https://developer.apple.com/documentation/swiftui/link-view-modifiers) ⟩
    * [listRowInsets(\_:)](https://developer.apple.com/documentation/swiftui/link/listrowinsets\(_:\)) - applies an **inset** to the **rows** in a list.
* [Foundation](https://developer.apple.com/documentation/foundation) ⟩ [Numbers, Data, and Basic Values](https://developer.apple.com/documentation/foundation/numbers_data_and_basic_values) ⟩ [UUID](https://developer.apple.com/documentation/foundation/uuid) (<mark style="color:red;">**struct**</mark>)
{% endtab %}

{% tab title="❓" %}
* [What is the difference between List and ForEach in SwiftUI?](https://stackoverflow.com/a/56536206/5409815)  ⭐️
{% endtab %}
{% endtabs %}
