新手教程：轻松玩转 SwiftUI List，构建交互式列表应用

2023-03-16 18:33:09

SwiftUI List：创建互动式列表的终极指南

1. SwiftUI List 简介

在 SwiftUI 中，List 控件是一个多功能且功能强大的工具，用于呈现一系列数据，通常是以结构或类实例的形式。它提供了一种简单而优雅的方式来创建列表视图，并支持各种交互操作，例如滚动、选择和刷新。

2. List 的基本用法

使用 List 最简单的办法是通过 List(_:) 初始化器，它需要一个包含数据的数组作为参数。以下示例展示了一个包含 5 个数字项的列表：

struct ContentView: View {
  let numbers = [1, 2, 3, 4, 5]

  var body: some View {
    List(numbers) { number in
      Text("\(number)")
    }
  }
}

3. 自定义 List 外观

通过采用 ListStyle 协议，您可以自定义 List 的外观。内建的 ListStyle 包括：

DefaultListStyle：默认的 ListStyle，具有纯色背景和标准文本标签。
PlainListStyle：使用透明背景和标准文本标签。
GroupedListStyle：将列表组织成组，每个组都带有标题。
InsetGroupedListStyle：类似于 GroupedListStyle，但为每个组添加了缩进。

要在 List 中使用自定义的 ListStyle，请在 List 初始化器中指定它：

struct ContentView: View {
  let numbers = [1, 2, 3, 4, 5]

  var body: some View {
    List(numbers, style: PlainListStyle()) { number in
      Text("\(number)")
    }
  }
}

4. 处理 List 中的事件

您可以利用 onAppear()、onDisappear() 和 onTapGesture() 等修饰符来处理 List 中的事件。例如，以下代码在用户点击列表项时会打印一条消息：

struct ContentView: View {
  let numbers = [1, 2, 3, 4, 5]

  var body: some View {
    List(numbers) { number in
      Text("\(number)")
        .onTapGesture {
          print("您点击了 \(number)")
        }
    }
  }
}

5. 高级 List 用法

List 提供了许多高级特性，包括：