SwiftUI列表List – 方君宇

SwiftUI 的 List 是专为展示结构化、可滚动的行式内容设计的。它等价于 iOS 的 UITableView 或 macOS 的 NSTableView，但使用上更为声明式。

基本用法

struct ListView: View {
    let fruits = ["🍎 Apple", "🍌 Banana", "🍇 Grape"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
    }
}

主要用途

1、数据集合展示：新闻列表、联系人、文件列表。

2、项目选择界面：侧边导航、菜单选项、任务清单。

3、增删改操作支持：删除条目、排序、滑动菜单。

4、搭配导航使用：NavigationLink 跳转到详情页。

主要功能

1、支持ForEach，可动态更新视图和数据。

2、支持 .onDelete()，实现滑动删除等操作。

3、支持 .onMove() 拖动排序。

4、支持 ,swipeActions 行滑动菜单，macOS 13+/iOS 15+版本。

5、支持NavigationLink，可用作导航菜单。

6、支持多选，需要添加 .selection(…)。

7、支持Section {}，可多组内容展示。

使用场景

1、静态列表

List {
    Text("设置")
    Text("关于")
}

2、动态列表

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

3、分组列表（Section）

List {
    Section(header: Text("水果")) {
        Text("🍎 Apple")
        Text("🍊 Orange")
    }
    
    Section(header: Text("蔬菜")) {
        Text("🥕 Carrot")
        Text("🥬 Lettuce")
    }
}

4、列表实现导航链接功能

List(items) { item in
    NavigationLink(destination: DetailView(item: item)) {
        Text(item.title)
    }
}

5、提供删除功能的列表

struct FruitListView: View {
    @State private var fruits = ["Apple", "Banana", "Grape"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            .onDelete { indices in
                fruits.remove(atOffsets: indices)
            }
        }
    }
}