Skip to content

List 的基本用法与数据源

SwiftUI 中的 List 就像一个强大的容器,可以轻松展示滚动的数据集合。它不仅能高效地处理大量数据,还提供了丰富的自定义选项,让你的 App 界面更加生动有趣!🎉

List 的基本结构

List 的基本用法非常简单,你只需要提供一个数据源,SwiftUI 就会自动帮你渲染出列表。数据源可以是数组、集合,甚至是实现了 Identifiable 协议的自定义类型。

swift
List {
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

这段代码会创建一个包含三行文本的简单列表。是不是很简单?😎

使用静态数据源

静态数据源是指在代码中直接定义的数据。例如,你可以创建一个字符串数组,然后用 List 来显示这些字符串。

swift
let names = ["张三", "李四", "王五"]

List {
    ForEach(names, id: \.self) { name in
        Text(name)
    }
}

这里,ForEach 循环遍历 names 数组,并为每个名字创建一个 Text 视图。id: \.self 告诉 SwiftUI 如何唯一标识每个元素。

使用动态数据源

动态数据源是指从外部获取的数据,例如从网络请求或数据库读取的数据。使用动态数据源可以让你的列表内容更加灵活和实时。

swift
struct Task: Identifiable {
    let id = UUID()
    let name: String
}

@State var tasks = [
    Task(name: "学习 SwiftUI"),
    Task(name: "完成 App 开发"),
    Task(name: "提交代码")
]

List(tasks) { task in
    Text(task.name)
}

在这个例子中,我们定义了一个 Task 结构体,并让它遵循 Identifiable 协议。然后,我们创建了一个 tasks 数组,并用 List 来显示这些任务。SwiftUI 会自动识别 Taskid 属性,并用它来唯一标识每个任务。

自定义列表样式

List 提供了丰富的样式选项,你可以根据自己的需求来定制列表的外观。例如,你可以修改列表的背景颜色、行间距、分割线等等。

swift
List {
    ForEach(1..<6) { index in
        Text("第 \(index) 行")
            .padding()
            .background(Color.gray.opacity(0.3))
            .cornerRadius(10)
    }
}
.listStyle(.plain)

这段代码创建了一个简单的列表,并为每一行添加了内边距、背景颜色和圆角。.listStyle(.plain) 移除了默认的列表样式,让你可以完全自定义列表的外观。

希望这些例子能帮助你更好地理解 List 的基本用法与数据源。快去动手试试吧!💪

本站使用 VitePress 制作