SwiftUI List 列表进阶用法解析

2024-02-19 07:55:12

正文

作为 SwiftUI 中最重要的视图之一，List 列表可用于展示一系列数据，通常以垂直滚动的形式呈现。除了基础的用法外，List 列表还提供了丰富的进阶功能，可以满足各种复杂的列表需求。

1. 自定义 Cell

默认情况下，List 列表会使用系统提供的基本样式来渲染数据。但有时，我们需要自定义 cell 的外观以满足特定需求。我们可以通过实现 rowContent() 方法来实现自定义 cell。

struct MyCell: View {
    let item: Item

    var body: some View {
        HStack {
            Text(item.name)
            Spacer()
            Text(item.price, formatter: .currency(code: "USD"))
        }
    }
}

然后，在 List 中使用 cellContent() 方法指定自定义 cell。

List(items, id: \.id) { item in
    MyCell(item: item)
}

2. 编辑模式

List 列表支持编辑模式，允许用户对数据进行编辑和删除操作。通过调用 enableEditing() 方法即可启用编辑模式。

List(items, id: \.id) { item in
    Text(item.name)
}
.enableEditing()

3. 多选

在编辑模式下，我们可以使用 allowsMultipleSelection() 方法启用多选功能，允许用户选择多个数据。

List(items, id: \.id, selection: $selectedItems) { item in
    Text(item.name)
}
.allowsMultipleSelection()

4. 分组

List 列表支持对数据进行分组，可以根据数据中的某个字段或属性进行分组。通过调用 Group() 方法即可实现分组。

List {
    ForEach(items) { item in
        Text(item.name)
    }
    .listRowGroup(by: \.category, header: { category in
        Text(category)
    })
}

5. Header 和 Footer

List 列表支持在列表顶部和底部添加 Header 和 Footer。通过调用 header() 和 footer() 方法即可实现。

List {
    ForEach(items) { item in
        Text(item.name)
    }
    .listRowGroup(by: \.category, header: { category in
        Text(category)
    }, footer: { category in
        Text("Total items: \(items.count)")
    })
}

6. Disclosure Indicator

List 列表支持在每行末尾添加 Disclosure Indicator，当用户点击时可以展开或折叠子视图。通过调用 disclosureIndicator() 方法即可实现。

List {
    ForEach(items) { item in
        Text(item.name)
            .disclosureIndicator()
    }
}

7. Swipe Actions

List 列表支持添加 Swipe Actions，允许用户通过向左或向右滑动来触发特定操作。通过调用 swipeActions() 方法即可实现。

List {
    ForEach(items) { item in
        Text(item.name)
    }
    .swipeActions(edge: .trailing, allowsFullSwipe: false) {
        Button(role: .destructive) {
            // Delete action
        } label: {
            Label("Delete", systemImage: "trash")
        }
    }
}