13.列表视图

在 SwiftUI 中，列表视图是一个非常重要的组件，可以用于显示数据列表、菜单、选项卡等。

SwiftUI 中的列表视图，包括 List 和 ForEach 两个组件的基本用法和高级用法。我们将通过一个示例来演示如何使用列表视图显示数据列表，并在列表项中添加图像、文本和交互控件。

List 组件

List 组件是 SwiftUI 中的列表视图，可以用于显示数据列表。List 组件需要一个数据源和一个内容视图，其中数据源用于提供列表数据，内容视图用于定义列表项的布局和样式。例如，我们可以使用 List 组件来显示一个简单的字符串数组：

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

创建了一个名为 items 的字符串数组，并将其传递给 List 组件作为数据源。
还使用 id 参数指定了一个唯一标识符，用于帮助 SwiftUI 管理列表项的状态。最后在 List 组件中使用 Text 组件来显示列表项的内容。

ForEach 组件

在上面的示例中，我们使用了 List 组件来显示一个简单的字符串数组。但是，如果想在列表项中添加图像、文本和交互控件需要使用更复杂的布局和样式。为了实现这个目的，可以使用 ForEach 组件来创建自定义的列表项视图。

ForEach 组件是 SwiftUI 中的循环视图，可以用于迭代一个数据源，并为每个元素创建一个视图。
例如可以使用 ForEach 组件来显示一个包含图像、文本和交互控件的列表：

struct ContentView: View {
    let items = [
        Item(name: "Item 1", image: "photo1", color: .red),
        Item(name: "Item 2", image: "photo2", color: .green),
        Item(name: "Item 3", image: "photo3", color: .blue)
    ]
    
    var body: some View {
        List {
            ForEach(items, id: \.name) { item in
                HStack {
                    Image(item.image)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 50, height: 50)
                        .foregroundColor(item.color)
                    Text(item.name)
                    Spacer()
                    Button(action: {
                        print("Button Tapped")
                    }) {
                        Image(systemName: "plus")
                    }
                }
            }
        }
    }
}

struct Item {
    let name: String
    let image: String
    let color: Color
}

创建了一个名为 items 的 Item 数组，并将其传递给 For Each 组件作为数据源，还使用了 id 参数来指定每个列表项的唯一标识符。
使用了 Item 的 name 属性作为标识符。在 ForEach 中使用了 HStack 组件来水平排列图像、文本和按钮。还使用了 Image、Text 和 Button 组件来显示列表项的内容，并在按钮上添加了一个简单的点击事件。

列表视图的高级用法

除了基本用法之外，SwiftUI 中的列表视图还支持许多高级用法，例如滚动到指定位置、滑动删除、拖放排序等。

滚动到指定位置

如果想在列表中滚动到指定位置可以使用 scrollTo() 方法来实现。这个方法需要一个标识符参数，用于指定要滚动到的列表项的标识符。
例如，如果想滚动到第二个列表项，可以使用以下代码：

List(items, id: \.self) { item in
    Text(item)
}
.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        scrollView.scrollTo(items[1], anchor: .top)
    }
}

在 List 上使用 onAppear 修饰符来在列表显示时执行 scrollTo() 方法。还使用了 DispatchQueueto 延迟 0.5 秒，以确保列表已经显示。最后使用 scrollView 来引用列表的滚动视图，并使用 scrollTo() 方法来滚动到第二个列表项。

滑动删除

如果想让用户能够滑动删除列表项，可以使用 onDelete() 修饰符来实现。这个修饰符需要一个闭包参数，用于在用户滑动删除列表项时执行。在闭包中可以从数据源中删除相应的元素，并使用 remove() 方法从列表中删除相应的列表项。
例如，如果想让用户能够滑动删除列表项，并从 items 数组中删除相应的元素，可以使用以下代码：

List {
    ForEach(items, id: \.self) { item in
        Text(item)
    }
    .onDelete(perform: { indexSet in
        items.remove(atOffsets: indexSet)
    })
}

在 ForEach 上使用 onDelete() 修饰符来启用滑动删除功能。在闭包中从 items 数组中删除相应的元素，并使用 remove() 方法从列表中删除相应的列表项。

拖放排序

如果想让用户能够拖放排序列表项，可以使用 onMove() 修饰符来实现。这个修饰符需要两个闭包参数，一个用于获取要移动的元素的索引，另一个用于在目标位置插入元素。在闭包中可以使用 move() 方法来移动元素的位置，并更新列表视图的显示顺序。
如果想让用户能够拖放排序列表项，并根据拖放的顺序重新排列 items 数组，可以使用以下代码：

List {
    ForEach(items, id: \.self) { item in
        Text(item)
    }
    .onMove(perform: { indices, newOffset in
        items.move(fromOffsets: indices, toOffset: newOffset)
    })
}

在这个例子中，我们在 ForEach 上使用 onMove() 修饰符来启用拖放排序功能。在闭包中，我们使用 move() 方法来移动元素的位置，并根据拖放的顺序重新排列 items 数组。

总结

列表视图是开发 iOS 和 macOS 应用程序中最常用的组件之一，而 SwiftUI 中的列表视图使得构建列表变得更加容易和直观。在本文中，我们介绍了 SwiftUI 中列表视图的基本用法和高级用法，并提供了示例代码来说明这些概念。