> 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/lists/list.md).

# List

[SwiftUI](/ios/swiftui.md) ⟩ [lists](/ios/swiftui/lists.md) ⟩ List 

{% hint style="success" %}
A <mark style="color:purple;">List</mark> <mark style="color:yellow;">displays any number of</mark> [views](/ios/swiftui/view.md) <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](/ios/swiftui/lists/list/liststyle.md)
* [List vs. ForEach](/ios/swiftui/view/grouping/foreach/list-vs.-foreach.md)
* [view groupings](/ios/swiftui/view/grouping.md)
* [list background color](/ios/swiftui/lists/list/list-background-color.md) - <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&amp;token=eff3bd53-7b9a-446e-b520-a188840e050c" alt="" data-size="line">
  {% endtab %}

{% tab title="👥" %}

* [ListStyle](/ios/swiftui/lists/list/liststyle.md)
* [NavigationView](/ios/swiftui/deprecated/navigationview.md)
* [＠Binding](/ios/swiftui/view/state/binding/binding.md)
* [seq.grouped(by:)](/ios/swift/collections/sequence/seq.grouped-by.md) - 將 Array 變成 Dictionary
* can add [Section](/ios/swiftui/control/section.md) header/footer.
* [view groupings](/ios/swiftui/view/grouping.md)
* [ForEach](/ios/swiftui/view/grouping/foreach.md)
  {% 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**](/ios/swiftui/lists/list.md) 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**](/ios/swiftui/lists/list.md) [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 %}