引言
SwiftUI中的List组件不仅可以用户创建简单的列表，和UITableView一样，它也支持分组和折叠功能，让数据展示更具层次感。通过分组功能，我们可以将数据按照特定的逻辑进行组织，而折叠则为用户提供了更为紧凑的界面体验。在本篇博客中我们将探讨如何在SwiftUI中构建分组列表，并实现数据折叠，从而提升列表视图的可读性与用户交互体验。
为列表添加分组
SwiftUI的列表视图支持分组和分组头视图，就像UIKit中的UITableView一样。要进行单元格的分组首先我们需要先放置一个Section视图，还可以有选择的添加组头和组尾视图。
下面我们来创建一个简单的分组列表，一组用来显示动物，一组用来显示植物，代码如下：
struct ContentView: View {/// 动物@State private var animals = ["猫","狗","猪"]/// 植物@State private var plants = ["花","草","树"]var body: some View {List {Section {ForEach(animals,id:\.self) { animal inAnimalView(name: animal)}} header: {Text("动物开始 ")} footer: {Text("动物结束")}Section {ForEach(plants,id:\.self) { plant inPlantView(name: plant)}} header: {Text("植物开始 ")} footer: {Text("植物结束")}}}
}
其中的AnimalView和PlantView均为自定义的视图，代码如下：
struct AnimalView:View {@State var name:Stringvar body: some View {HStack {Circle().fill(.red).frame(width: 20.0,height: 20.0)Text(name)}}
}
struct PlantView:View {@State var name:Stringvar body: some View {HStack {Rectangle().fill(.green).frame(width: 20.0,height: 20.0)Text(name)}}
}
创建一个分组列表
SwiftUI中的列表就像UITableView一样也支持分组样式和普通样式，上面我们创建的为默认的普通样式，如果我们需要使用分组的样式，可以在列表上使用.listStyle(.grouped)修饰符。代码如下：
struct ContentView: View {/// 动物@State private var animals = ["猫","狗","猪"]/// 植物@State private var plants = ["花","草","树"]var body: some View {List {Section {ForEach(animals,id:\.self) { animal inAnimalView(name: animal)}} header: {Text("动物开始 ")} footer: {Text("动物结束")}Section {ForEach(plants,id:\.self) { plant inPlantView(name: plant)}} header: {Text("植物开始 ")} footer: {Text("植物结束")}}.listStyle(.grouped)}
}
效果如下：
创建一个可折叠列表
在复杂数据展示中，折叠列表是一种非常实用的设计，尤其是在需要按类别显示数据时。通过折叠和展开分组内容，用户可以更灵活地浏览信息，而不必一次性显示所有项目。在SwiftUI中，我们可以利用@State变量来跟踪每个分组的折叠状态，结合点击事件动态切换列表的显示效果。通过这样的设计，用户不仅能够直观地查看和管理分组内容，还可以享受到简洁、流畅的交互体验。
下面我们就来实现一个可折叠的分组列表，代码如下：
struct ContentView: View {// 用于跟踪各个分组的折叠状态@State private var isSectionExpanded: [String: Bool] = [:]// 假设有一些分组数据let groupedItems: [String: [String]] = ["Fruits": ["Apple", "Banana", "Orange"],"Vegetables": ["Carrot", "Broccoli", "Cucumber"]]var body: some View {List {ForEach(groupedItems.keys.sorted(), id: \.self) { section inSection(header: Text(section).onTapGesture {// 切换分组的折叠状态isSectionExpanded[section]?.toggle()}) {if isSectionExpanded[section] ?? true {ForEach(groupedItems[section]!, id: \.self) { item inText(item)}}}}}.onAppear {// 初始化每个分组的折叠状态groupedItems.keys.forEach { key inisSectionExpanded[key] = true // 默认展开}}}
}
效果如下：
这段代码相对之前的可能有一点复杂，但是分解开来其实每一行都是我们之前博客中讲解到的内容。
- isSectionExpanded：一个字典，用于跟踪每个分组的折叠状态，
key为分组名。 - onTapGesture：点击分组标题时切换
isSectionExpanded的布尔值，以此控制分组内容的显示或隐藏。 - ForEach：根据分组的状态，条件性地显示分组中的内容。
- onAppear：这个我们还没有介绍到，它视图的生命周期方法，和UIKit中的含义相同，当视图出现时就会执行它的闭包。
结语
在SwiftUI中，通过对列表添加分组和折叠功能，我们可以更好地组织和展示复杂的数据结构。分组让内容层次更加清晰，而折叠功能则使得界面更加简洁、易于浏览。希望通过这篇介绍，能帮助你在项目中灵活运用这些特性，提升用户的操作体验。随着SwiftUI的不断更新，我们可以期待更多更强大的UI组件，使得开发更加高效便捷。
