SwiftUI—列表视图

315 阅读1分钟

在 UIKit 中相当于UITableView,并且它也被广泛使用。 事实上,List与Form 几乎相同,只是List用于呈现数据而不是请求用户输入。

实际上Form只是一种特殊类型的List

有一件事List可以做Form而不能做,那就是完全从动态内容生成行而不需要借助ForEach

List(0..<5) {

    Text("Dynamic row \($0)")

}  

在处理一组数据时,SwiftUI 仍然需要知道如何唯一地标识每一行,因此,如果某一行被删除,它可以简单地删除该行,而不必重新绘制整个列表。这就是id参数的用武之地,它在List和中的工作方式与ForEach相同- 它让我们准确地告诉 SwiftUI 数组中的每个项目是唯一的。

    let people = ["Finn", "Leia", "Luke", "Rey"]

    var body: some View {

        List(people, id: \.self) {

            Text($0)
        }
    }  

如果我们想混合静态和动态行,我们可以这样写:

List {
    Text("Static Row")

    ForEach(people, id: \.self) {

        Text($0)
    }

    Text("Static Row")
 }

删除cell

SwiftUI 为我们提供了onDelete()修饰符,用于控制如何从集合中删除对象。实际上,onDelete()专门与List和 ForEach:一起使用。onDelete()仅存在于ForEach 上

@State private var arr = [......]

//...


List{
    ForEach(arr, id:\.self){
        
        Text("xxxxxxxx\($0)")
    }
    .onDelete(perform: { indexSet in
        arr.remove(atOffsets: indexSet)
    })
}

列表 单选/ 多选

使List与选择一起工作需要三个步骤,首先创建一些状态来存储所点击的任何行 ;然后,告诉列表在点击一行时更新该状态,这是双向绑定,这意味着点击一行会更新属性,而且更新属性也会选择该行

image.png

列表显示字符串,这意味着使所选值 成为 可选字符串 。因为默认情况下不会选择任何内容,但当点击用户的行时,它将包含用户的姓名

  • 多选

处理多项选择,则需要更改该selection属性以使其存储一组值。默认情况下可以为空,这意味着未选择任何内容 。另外,添加一个EditButton,它会自动处理启用或禁用编辑,因此也启用或禁用多选模式 。

image.png

滑动操作

image.png

image.png