SwiftUI控件之 List（一）

发表于 更新于 分类于 阅读次数：

在很多 app 中，我们经常能看到上下滚动的列表，在 SwiftUI 中，我们可以使用List 实现这样的功能。

创建一个列表

要实现一个列表，我们需要先创建一个数组类型的数据源：

1
var books: [String] = ["西游记", "红楼梦", "三国演义", "水浒传"]

使用 ForEach 遍历数组，将元素显示到 List中：

1
2
3
4
5
List {
    ForEach(books, id: \.self) { book in
         Text("《\(book)》")
    }
}

除了上面的这种方式，我们还可以直接将数据元给到List，然它进行循环创建列表：

1
2
3
List(books, id: \.self) { book in
            Text("《\(book)》")
}

这里我们注意到，不管是我们使用哪种方式，我们都需要设置一个id的参数，这是因为List 要求每一行的元素都要有一个唯一的id，以便我们后续对List 进行编辑操作。这里我们是直接将循环出来的元素对象本身作为id 给它。

注意，这在数据源中元素不会出现重复的情况下是可行，但是如果存在重复相同的元素，就会出现编辑异常的情况。

不同的 listStyle

我们可以通过 listStyle 修饰器来定义List 不同的风格样式，insetGrouped、inset、grouped、plain、sidebar、automatic。

注意，在不同的系统中样式显示也不一致。例如sidebar 样式在 iPadOS 中显示为侧边栏样式，在 iOS 中则为默认的样式。

1
.listStyle(.automatic)

如果我们想要实现 List 分组的效果，可以使用 Section ，然后Section 的构造方法分别给每个分组设置header 和footer。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
List {
    Section {
        ForEach(books, id: \.self) { book in
            Text("《\(book)》")
        }
    } header: {
        Text("四大名著")
            .bold()
    } footer: {
        Text("推荐阅读书籍")
    }
    Section {
        ForEach(books, id: \.self) { book in
            Text("《\(book)》")
        }
    } header: {
        Text("四大名著")
            .bold()
    } footer: {
        Text("推荐阅读书籍")
    }
}

效果如下：