UITableView 是 iOS 开发中非常常见的一个组件，依靠其强大的 Delegate 和优良的性能，在注重触控体验的移动设备上被广泛使用。

SwiftUI 中包含了一个名为List的控件，其功能与 UITableView 类似，但使用更加简洁，同时支持强大的 Data Binding，有效解决了 UITableView 中 Data Source 配置过于繁琐的问题。

0. 准备工作

继续使用上一篇博文《SwiftUI 初体验》中创建的项目，创建一个新的 SwiftUI 文件，并将其命名为 ListView：

创建完成后，为了便于查看和体验，我们需要将应用启动后的根视图配置为我们目前关注的ListView。首先修改SceneDelegate中的func scene()方法，将我们新创建的ListView配置为应用的默认视图，相关代码如下：


if let windowScene = scene as? UIWindowScene {
    let window = UIWindow(windowScene: windowScene)
    window.rootViewController = UIHostingController(rootView: ListView())
    self.window = window
    window.makeKeyAndVisible()
}

1. 简单体验

回到ListView中，加入一个 List组件，首先我们会做一次简单的验证，为List加入 5 个 item，并使用Text作为List的容器 Cell


List(0..<5) {_ in
    Text("List Item")
}

填充好代码后，点击预览区域的 Resume 按钮，即可看到当前 ListView 的预览：

2. 数据绑定

简单体验过List的使用方式后，我们准备来一点稍微复杂的，首先我们定义一个 ListModel：


struct ListModel {
    var title: String
    var subTitle: String
    
    init(title: String, subTitle: String) {
        self.title = title
        self.subTitle = subTitle
    }
}

结构非常简单，仅包含两个字符串属性。

接下来我们为 ListView 添加一个 dataSource:[ListModel] 变量，并使用 map 对其进行初始化：


var dataSource = (0..<5).map({ListModel(title: "Item \($0)", subTitle: "Sub \($0)")})

初始化后的 dataSource 中包含了 5 个 ListModel，接下来我们会将 dataSource 作为数据源，绑定到 List 中：


var body: some View {
    List(dataSource.identified(by: \.title)) { model in
        Text(model.title)
    }
}

再次点击Resume按钮后，即可预览到绑定了数据的 List：

3. 定制 Cell

简单的使用 Text 作为载体显然是不满足绝大多数业务场景的，因此我们需要一个页面结构较为复杂的 Cell 来展示我们的数据。List 和 UITableView 很大的不同在于，UITableView 必须配合 UITableViewCell 使用，而在 SwiftUI 的世界里，一切皆为 View，所以我们依然会从新建一个 View 入手，从头构建我们的 Cell。

首先新建一个新的 SwiftUI 文件，将其命名为 ListCellView：

接下来我们以一个VStack为容器，添加2个垂直排列的Text，以承载 ListModel 中的Title和Subtitle：


struct ListCellView : View {
    var body: some View {
        HStack{
            VStack(alignment: .leading) {
                Text("Title")
                Text("Subtitle")
            }
            Spacer()
        }.padding()
    }
}

点按Resume，我们会发现预览界面将这个Cell当作普通的View预览了：

为了能正常预览，我们需要对ListCellView_Previews做一些修改，加入.previewLayout并指定预览尺寸：


#if DEBUG
struct ListCellView_Previews : PreviewProvider {
    static var previews: some View {
        ListCellView().previewLayout(.fixed(width: 375, height: 60))
    }
}
#endif

即可正常预览到 Cell：

接下来在 ListCellView中添加一个属性var model: ListModel作为入参，并更新对应的ListCellView_Previews代码：


#if DEBUG
struct ListCellView_Previews : PreviewProvider {
    static var previews: some View {
        ListCellView(model:ListModel(title: "Item Title", subTitle: "Item SubTitle")).previewLayout(.fixed(width: 375, height: 60))
    }
}
#endif

以及ListCellView的布局代码：


struct ListCellView : View {
    var model: ListModel
    var body: some View {
        HStack{
            VStack(alignment: .leading) {
                Text(model.title)
                Text(model.subTitle)
            }
            Spacer()
        }.padding()
    }
}

最后，回到ListView，使用新创建的ListCellView作为 List 的 Content：


struct ListView : View {
    
    var dataSource = (0..<5).map({ListModel(title: "Item \($0)", subTitle: "Sub \($0)")})
    
    var body: some View {
        List(dataSource.identified(by: \.title)) { model in
            ListCellView(model: model)
        }.padding()
    }
}

即可看到数据被正确加载到了 List 中：