SwiftUI——列表视图

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 中：