ForEach and List both create lists, and they are important components of SwiftUI. They are used to replace UITableView in UIKit. In this article we will learn about the use of ForEach and List.

This article is perfect for SwiftUI beginners.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

The use of the List

Let’s look at the List first. The simplest use of List

List(0..>10) {
    Text("Hellow, SwiftUI")}Copy the code

This is simply iterating the text 10 times to make a list. Suppose we have an array of students. The array consists of 20 dictionaries, each containing the student’s ID and name.

Let’s look at creating a List:

List(students, id: \.id) { student in
    Text("student id:\(student.id) name:\(student.name)")}Copy the code

The List is initialized with three parameters:

  1. An unnamed onedata, the array to be iterated over. In this case, we’re usingstudents.
  2. Keypath typeidParameter that uniquely distinguishes which element in the array is currently iterated to.
  3. The last parameter is a closure, and each iteration forms a new view from the closure view. Since this is the last parameter, you can use a trailing closure.

The use of the ForEach

ForEach, like a List, can iterate through an array to create a List. Use ForEach for the above example.

The arguments to ForEach are almost the same as those to List, so I won’t repeat them here.

List is different from ForEach

As you can see from the above figure, the syntax of ForEach and List is very similar, but ForEach shows the Preview effect in multiple screens.

This effect is the same as the following code.

struct ContentView: View {
    var students: [Student]
    var body: some View {
        Text("Student id:0 name:aaa")
        Text("Student id:0 name:aaa")
        Text("Student id:0 name:aaa")}}Copy the code

This is the case because ForEach does not generate a container to wrap the View inside the closure, whereas lists do the opposite, and ForEach lists are not scrollable, meaning that views inside the ForEach superview cannot be scrollable. This is what we need to be aware of when using lists and ForEach.

The application scenarios of List and ForEach

Since a List generates a container by default to wrap its child views, it is better to use it alone to create a List that supports vertical scrolling, as we did above.

ForEach, on the other hand, does not generate a container and does not support scrolling, so it is usually nested inside other containers.

Nested List ForEach

Nested inside a List can be used to create a UITableView with headers, showing both fixed headers and scrolling headers.

struct ContentView: View {
    @State var students: [Student]
    var body: some View {
        VStack {
            Text("This is a Header that doesn't move.")
            List {
                Text("This is the Header that follows the scroll.")
                ForEach(students, id: \.id) { stu in
                    Text("student id:\(stu.id) name: \(stu.name)").frame(width: 200, height: 60)
                }
                .onDelete{ indexSet in
                    for index in indexSet {
                        students.remove(at: index)
                    }
                }
                Text("This is following the scroll Footer")}Text("This is the fixed Footer.")}}}Copy the code

There are two things to note here:

  1. @StateBy addingData binding{% label danger@Cannot use mutating member on immutable value: ‘self’ is immutable %}
  2. .onDeleteI added thismodifireAfter the left – swipe delete effect appears

ScrollView nested ForEach

Nested ForEach with a ScrollView that scrolls horizontally can implement a UICollectionView that scrolls horizontally in UIKit.

Section nested ForEach

Use List, Section, and ForEach nesting to achieve grouping similar to UITableView.

Again using the student example above, now let’s classify the students. Let’s create two classes:

enum StuCls: String.CaseIterable {
    case ClsOne = "Class"
    case ClsTwo = "Class 2"
}
Copy the code

Divide the students into classes

struct Student: Identifiable {
    var id: Int
    var name: String
    var classId: StuCls
}
Copy the code

Next, create a few classes of students:

let std1 = Student(id: 0, name: "Student 1", classId: StuCls.ClsOne)
let std2 = Student(id: 1, name: Student 2 "", classId: StuCls.ClsOne)
let std3 = Student(id: 2, name: "Students 3", classId: StuCls.ClsOne)
let std4 = Student(id: 2, name: Students "4", classId: StuCls.ClsTwo)
let std5 = Student(id: 2, name: "Students 5", classId: StuCls.ClsTwo)
let std6 = Student(id: 2, name: "Students' 6", classId: StuCls.ClsTwo)

var students = [std1, std2, std3, std4, std5, std6]
Copy the code

Finally, combine lists, ForEach, and sections to create lists that can be grouped

List {
    ForEach(StuCls.allCases, id: \.rawValue) { cls in
        Section(header: Text(cls.rawValue)) {
            ForEach(students.filter { $0.classId = = cls }, id: \.id) { stu in
                Text("student id:\(stu.id) name: \(stu.name)")}}}}Copy the code

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

conclusion

In this paper, we studied the SwiftUI List/ForEach/ScrollView/Section of usage, an example and using the first two is described in detail and use different scenarios. You should have learned:

  • ListandForEachUsage, the differences between them and usage scenarios
  • How do I create a horizontal scrolling list like a UICollectionView
  • How do you implement a grouped list like a UITableView
  • Head fixed and follow the implementation of a scrolling list