SwiftUI 的列表组件 - List （Trae 提升效率）

引子

在我们日常开发中，实现一个列表是非常常见的开发需求。那在 SwiftUI 中，我们如何去实现一个列表呢？

在 SwiftUI 中，是通过 List 组件来构建滚动表格视图的，功能类似于 UIKit 中的 UITableView，但使用方式更加声明式与直观。

在本文中将会介绍 List 的基本用法和操作交互的内容，让我们开始吧！

基本使用

首先，我们来看一下静态列表的代码实现：

scss 复制代码

List {
    Text("苹果")
    Text("香蕉")
    Text("梨")
}

可以看到 List 组件的使用方式对比 UITableView 还是非常简洁的，只需要在里面放置内容组件就可以了。效果图如下：

当然，在日常开发场景中，静态列表是不多见的，更多的是需要我们根据数据构建动态列表。

首先，我们需要定义一个模型来表示数据，然后在初期的开发阶段我们还需要造一些本地数据来看页面效果。在没有 AI 工具之前，手动处理这些逻辑还是比较烦人的。但现在，我们可以在 Trae 中输入指令去自动生成模型和假数据。

比如，我们可以在 AI 对话流中选中 ContentView,输入以下内容来生成模型：生成一个 Fruit 的结构体,包含字符串类型的 name、字符串类型的 color和 Int 类型的 count。遵循 Identifiable 协议。代码如下：

rust 复制代码

// 定义 Fruit 结构体，遵循 Identifiable 协议
struct Fruit: Identifiable {
    let id = UUID() // 自动生成唯一标识符
    let name: String
    let color: String
    let count: Int
}

回车完成就可以看到 Trae 输出的内容，选择应用接受之后，代码就会自动写入到你的源文件中。

接着，在对话流中输入以下内容来生成假数据：用 Swift 生成一个长度为 10 的数组，元素类型为 Fruit。代码如下：

less 复制代码

private let fruits: [Fruit] = (1...10).map { index in
    Fruit(
        name: "水果\(index)",
        color: index % 2 == 0 ? "红色" : "绿色",
        count: index
    )
}

数据准备完成，我们就可以使用 List 组件来进行展示了，实例代码如下：

scss 复制代码

List(fruits) { fruit in
    HStack(spacing: 5) {
        Text(fruit.name)
        Text("颜色：\(fruit.color)")
        Text(" 数量：\(fruit.count)")
    }
}

效果图如下：

在真实的开发场景中，List 更多的是与 ForEach 来组合使用，示例代码如下：

scss 复制代码

List {
    ForEach(fruits) { fruit in
        HStack(spacing: 5) {
            Text(fruit.name)
            Text("颜色：\(fruit.color)")
            Text(" 数量：\(fruit.count)")
        }
    }
}

当然，静态和动态两种方式你也可以混合着用，示例代码如下：

scss 复制代码

List {
    Text("苹果")
    Text("香蕉")
    Text("梨")
    
    ForEach(fruits) { fruit in
        HStack(spacing: 5) {
            Text(fruit.name)
            Text("颜色：\(fruit.color)")
            Text(" 数量：\(fruit.count)")
        }
    }
}

关于左滑删除和拖拽排序的功能，我们可以通过 ForEach 的两个操作符 onDelete 和 onMove 来实现，示例代码如下：

scss 复制代码

// 第一步，fruits 用 @State 修饰
@State private var fruits: [Fruit] = ...
List {
    ForEach(fruits) { fruit in
        HStack(spacing: 5) {
            Text(fruit.name)
            Text("颜色：\(fruit.color)")
            Text(" 数量：\(fruit.count)")
        }
    }
    // 第二步添加相关操作符
    .onDelete { indexSet in
        fruits.remove(atOffsets: indexSet)
    }
    .onMove { indices, newOffset in
        fruits.move(fromOffsets: indices, toOffset: newOffset)
    }
}

效果图如下：