使用 List 显示数据列表

在 SwiftUI 中，List 是一个强大的控件，用于显示可滚动的数据列表。它可以与动态数据结合使用，支持基本的列表项、分组、以及自定义样式。以下是使用 List 显示数据列表的详细介绍和示例。

1. 创建基本的 List

1.1 使用静态数据

你可以使用静态数据创建一个简单的列表，直接在 List 中定义数据项。

示例：基本的静态 List

import SwiftUI

struct StaticListExample: View {
    var body: some View {
        List {
            Text("Item 1") // 列表项
            Text("Item 2")
            Text("Item 3")
        }
        .navigationTitle("Static List") // 设置导航栏标题
    }
}

1.2 使用动态数据

为了显示动态数据，可以使用数组或其他集合类型。

示例：使用动态数据

struct DynamicListExample: View {
    let items = ["Apple", "Banana", "Cherry", "Date"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item) // 列表项
        }
        .navigationTitle("Dynamic List") // 设置导航栏标题
    }
}

2. 列表项的自定义

2.1 自定义列表项

你可以通过创建自定义视图来设计更复杂的列表项。

示例：自定义列表项

struct CustomListItem: View {
    var fruit: String

    var body: some View {
        HStack {
            Image(systemName: "leaf") // 自定义图标
            Text(fruit)
                .font(.headline) // 自定义字体样式
        }
        .padding()
    }
}

struct CustomListExample: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date"]

    var body: some View {
        List(fruits, id: \.self) { fruit in
            CustomListItem(fruit: fruit) // 使用自定义列表项
        }
        .navigationTitle("Custom List") // 设置导航栏标题
    }
}

3. 列表的分组

3.1 使用 Section 进行分组

List 支持分组，可以通过 Section 组件将列表分成不同部分。

示例：分组列表

struct GroupedListExample: View {
    let fruits = ["Apple", "Banana", "Cherry"]
    let vegetables = ["Carrot", "Lettuce", "Peas"]

    var body: some View {
        List {
            Section(header: Text("Fruits")) {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit) // 列表项
                }
            }
            Section(header: Text("Vegetables")) {
                ForEach(vegetables, id: \.self) { vegetable in
                    Text(vegetable) // 列表项
                }
            }
        }
        .navigationTitle("Grouped List") // 设置导航栏标题
    }
}

4. 列表的可编辑性

4.1 实现可编辑的列表

你可以通过 onDelete 和 onMove 来实现可编辑的列表。

示例：可编辑列表

struct EditableListExample: View {
    @State private var fruits = ["Apple", "Banana", "Cherry", "Date"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit) // 列表项
            }
            .onDelete(perform: delete) // 实现删除功能
        }
        .navigationTitle("Editable List") // 设置导航栏标题
        .toolbar {
            EditButton() // 编辑按钮
        }
    }

    func delete(at offsets: IndexSet) {
        fruits.remove(atOffsets: offsets) // 删除指定项
    }
}

5. 总结

  • 基本使用：使用 List 显示静态或动态数据。
  • 自定义列表项：可以创建自定义视图来丰富列表项的展示。
  • 分组列表：使用 Section 进行分组，提高数据的可读性。
  • 可编辑性：通过 onDelete 和 onMove 实现列表的可编辑功能。

通过灵活使用 List，你可以轻松创建出符合需求的可滚动数据列表，提升用户体验。

Last Updated::