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 中的 TitleSubtitle

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章