SwiftUI List和Form的分组视图Section

在 SwiftUI 中，Section 是一种用于在 List 或 Form 中组织和分组内容的视图容器。它可以包含标题（header）、内容（content）以及页脚（footer），从而为数据提供逻辑上的分隔，并提升界面的可读性。

基本用法

import SwiftUI

struct SectionExampleView: View {
    var body: some View {
        List {
            Section(header: Text("Fruits")) {
                Text("Apple")
                Text("Banana")
                Text("Orange")
            }
            
            Section(header: Text("Vegetables"), footer: Text("Healthy choices!")) {
                Text("Carrot")
                Text("Broccoli")
                Text("Spinach")
            }
        }
        .listStyle(.insetGrouped) // 设置列表样式
    }
}

struct SectionExampleView_Previews: PreviewProvider {
    static var previews: some View {
        SectionExampleView()
    }
}

主要功能

1、Header（头部）

可以使用文字、图片或任何自定义视图作为标题。

Section(header: Text("Section Title")) {
    Text("Item 1")
}

2、Footer（尾部）

用于在分组末尾添加说明性文字或其他元素。

Section(footer: Text("This is a footer")) {
    Text("Item 1")
}

在实际场景中，可以实现在List底部添加说明文字。

3、自定义 Header 和 Footer

Section 支持任何视图作为 Header 或 Footer。

Section(header: HStack {
    Image(systemName: "star")
    Text("Custom Header")
}, footer: Text("Custom Footer")) {
    Text("Item 1")
}

4、动态内容

可以使用 ForEach 动态生成内容。

let items = ["Apple", "Banana", "Orange"]
Section(header: Text("Fruits")) {
    ForEach(items, id: \.self) { item in
        Text(item)
    }
}

样式调整

List {
    let items = ["Apple", "Banana", "Orange"]
    ForEach(items, id: \.self) { item in
        Text(item)
    }
}
.listStyle(.sidebar) // 设置列表样式

可以通过 .listStyle 修改列表的显示样式：

1、.automatic（自动）