🎁List

SwiftUI ⟩ Lists ⟩ List SwiftUI ⟩ container ⟩ collection ⟩ List

A container that presents rows of data arranged in a single column, optionally providing the ability to select one or more members.

// scrollable list
List {

    // section 
    Section("My Pets") {
        ForEach(model.myPets) { pet in PetRowView(pet: pet) }
    }
    
    // section
    Section("Other Pets") {
        ForEach(model.otherPets) { pet in PetRowView(pet: pet) }
    }
    
}

To combine static and dynamic views in a List, or to combine two or more different groups of dynamic views, use the ForEach type instead of passing your collection of data to List.

👉 SwiftUI Tutorials ⟩ Handling User Input ⟩ Sec. 3: Add a Control to Toggle the State

List vs. ForEach

ForEach 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 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 initializer allows you to use it just like the ForEach view in case you want to have a list consisting of a single type only.

Container	可容納不同類的項目	可捲動
List	✅	✅
ForEach	❌	❌

Container

可容納不同類的項目

可捲動

List

✅

ForEach

❌

⭐️ convenient init

// 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")
}
// equivalent to:
//   List(1..<4){ Text("\($0)") }

⭐️ static & dynamic subviews

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

Previouscollection NextListStyle

Last updated 1 hour ago

// scrollable list List { // section Section("My Pets") { ForEach(model.myPets) { pet in PetRowView(pet: pet) } } // section Section("Other Pets") { ForEach(model.otherPets) { pet in PetRowView(pet: pet) } } }

Container	可容納不同類的項目	可捲動
List	✅	✅
ForEach	❌	❌

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