在SwiftUI中构建动态表格视图

2023-12-06 23:12:48

引言

表格视图是iOS应用程序中必不可少的组件，用于显示结构化数据。SwiftUI为构建表格视图提供了直观的API，它结合了数据绑定、MVVM模式和可观察对象，使得创建动态和响应式表格视图变得更加容易。

数据绑定

SwiftUI中的数据绑定是一种强大的技术，它允许视图中的UI元素自动更新，以响应底层数据模型中的更改。要使用数据绑定，只需在视图中使用@Binding属性修饰符，它将在视图和数据模型之间建立双向绑定。

MVVM模式

MVVM（Model-View-ViewModel）模式是一种设计模式，它将视图、模型和视图模型分离。在SwiftUI中，视图模型是一个可观察对象，它负责管理数据并为视图提供计算属性。这使得视图可以独立于数据模型的变化，保持轻量级和可测试性。

可观察对象

可观察对象是SwiftUI中的一种特殊类型，它可以发布对自身属性的更改通知。视图模型可以充当可观察对象，当底层数据发生更改时发出通知。这使得视图可以自动更新，以响应可观察对象的更改。

自定义单元格

SwiftUI允许您创建自定义单元格，以自定义表格视图的外观和行为。您可以使用UITableViewCellRepresentable协议来实现一个自定义单元格，该协议提供了一个makeUITableViewCell(context:)方法，您可以在其中配置单元格的UI和逻辑。

多节表格

表格视图可以分为多个节，每个节都可以包含自己的数据和标题。在SwiftUI中，您可以使用ForEach和Section视图来创建多节表格。

展开/折叠

展开/折叠行允许用户展开或折叠表格视图中的行，以显示或隐藏其他内容。在SwiftUI中，可以使用DisclosureGroup视图来实现展开/折叠行。

滑动删除

滑动删除功能允许用户通过向左或向右滑动来删除表格视图中的行。在SwiftUI中，可以使用swipeActions修饰符来实现滑动删除。

实施

让我们逐步构建一个功能齐全的表格视图：

1. 创建数据模型

创建一个ListItem模型，其中包含名称、说明和是否展开的状态：

struct ListItem: Identifiable {
  let id = UUID()
  var name: String
  var description: String
  var isExpanded: Bool
  
  init(name: String, description: String, isExpanded: Bool = false) {
    self.name = name
    self.description = description
    self.isExpanded = isExpanded
  }
}

2. 创建视图模型

创建一个ListViewModel，它是一个可观察对象，包含一个列表项的可观察数组：

class ListViewModel: ObservableObject {
  @Published var listItems: [ListItem]
  
  init() {
    listItems = [
      ListItem(name: "Item 1", description: "Description 1"),
      ListItem(name: "Item 2", description: "Description 2"),
      ListItem(name: "Item 3", description: "Description 3"),
    ]
  }
  
  func toggleExpansion(at index: Int) {
    listItems[index].isExpanded.toggle()
  }
  
  func deleteItem(at index: Int) {
    listItems.remove(at: index)
  }
}

3. 创建视图

使用List和ForEach视图创建表格视图：

struct ListView: View {
  @ObservedObject var viewModel = ListViewModel()
  
  var body: some View {
    List {
      ForEach(viewModel.listItems) { item in
        ListItemView(item: $item)
      }
    }
  }
}

4. 创建自定义单元格

创建一个自定义单元格来显示每个列表项：

struct ListItemView: View {
  @Binding var item: ListItem
  
  var body: some View {
    VStack {
      Text(item.name)
        .font(.headline)
      
      if item.isExpanded {
        Text(item.description)
          .font(.body)
      }
    }
    .swipeActions {
      Button(role: .destructive) {
        viewModel.deleteItem(at: index)
      } label: {
        Label("Delete", systemImage: "trash")
      }
    }
  }
}

5. 添加展开/折叠功能

在ListItemView中添加展开/折叠功能：

struct ListItemView: View {
  @Binding var item: ListItem
  
  var body: some View {
    VStack {
      Text(item.name)
        .font(.headline)
        .onTapGesture {
          viewModel.toggleExpansion(at: index)
        }
      
      if item.isExpanded {
        Text(item.description)
          .font(.body)
      }
    }
    .swipeActions {
      Button(role: .destructive) {
        viewModel.deleteItem(at: index)
      } label: {
        Label("Delete", systemImage: "trash")
      }
    }
  }
}