SwiftUI（十）- 列表（分组，折叠）

SwiftUI（十）- 列表（分组，折叠）-LMLPHP

引言

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 in
                    AnimalView(name: animal)
                }
            } header: {
                Text("动物开始 ")
            } footer: {
                Text("动物结束")
            }

            Section {
                ForEach(plants,id:\.self) { plant in
                    PlantView(name: plant)
                }
            } header: {
                Text("植物开始 ")
            } footer: {
                Text("植物结束")
                
            }
        }
       
    }
}

其中的AnimalView和PlantView均为自定义的视图，代码如下：

struct AnimalView:View {
    @State var name:String
    var body: some View {
        HStack {
            Circle()
                .fill(.red)
                .frame(width: 20.0,height: 20.0)
            Text(name)
        }
    }
}


struct PlantView:View {
    @State var name:String
    var body: some View {
        HStack {
            Rectangle()
                .fill(.green)
                .frame(width: 20.0,height: 20.0)
            Text(name)
        }
    }
}

SwiftUI（十）- 列表（分组，折叠）-LMLPHP

创建一个分组列表

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 in
                    AnimalView(name: animal)
                }
            } header: {
                Text("动物开始 ")
            } footer: {
                Text("动物结束")
            }

            Section {
                ForEach(plants,id:\.self) { plant in
                    PlantView(name: plant)
                }
            } header: {
                Text("植物开始 ")
            } footer: {
                Text("植物结束")
                
            }
        }.listStyle(.grouped)
       
    }
}

效果如下：

SwiftUI（十）- 列表（分组，折叠）-LMLPHP

创建一个可折叠列表

在复杂数据展示中，折叠列表是一种非常实用的设计，尤其是在需要按类别显示数据时。通过折叠和展开分组内容，用户可以更灵活地浏览信息，而不必一次性显示所有项目。在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 in
                Section(header: Text(section).onTapGesture {
                    // 切换分组的折叠状态
                    isSectionExpanded[section]?.toggle()
                }) {
                    if isSectionExpanded[section] ?? true {
                        ForEach(groupedItems[section]!, id: \.self) { item in
                            Text(item)
                        }
                    }
                }
            }
        }
        .onAppear {
            // 初始化每个分组的折叠状态
            groupedItems.keys.forEach { key in
                isSectionExpanded[key] = true // 默认展开
            }
        }
    }
}

效果如下：

SwiftUI（十）- 列表（分组，折叠）-LMLPHP

这段代码相对之前的可能有一点复杂，但是分解开来其实每一行都是我们之前博客中讲解到的内容。

isSectionExpanded：一个字典，用于跟踪每个分组的折叠状态，key 为分组名。
onTapGesture：点击分组标题时切换 isSectionExpanded 的布尔值，以此控制分组内容的显示或隐藏。
ForEach：根据分组的状态，条件性地显示分组中的内容。
onAppear：这个我们还没有介绍到，它视图的生命周期方法，和UIKit中的含义相同，当视图出现时就会执行它的闭包。

结语

在SwiftUI中，通过对列表添加分组和折叠功能，我们可以更好地组织和展示复杂的数据结构。分组让内容层次更加清晰，而折叠功能则使得界面更加简洁、易于浏览。希望通过这篇介绍，能帮助你在项目中灵活运用这些特性，提升用户的操作体验。随着SwiftUI的不断更新，我们可以期待更多更强大的UI组件，使得开发更加高效便捷。

胖虎1