SwiftUI创建TableView(1)

一、前言：

swiftUI是苹果2019年新推出的一款UI框架，势必是未来苹果主推的一种UI搭建方式，并且其确实可以用更少的代码实现APP界面的构建，声明式的UI实现方式使得视图层级显而易见。
UItableview是UIKit中常见的一种视图，在传统的使用方式中，我们需要配置代理，配置cell等繁琐的流程，但是现在我们有了swiftUI，简单几行代码就能实现tableview。
下面我来介绍一下swiftUI实现tableview的三种方式：
1、固定行数方式，
2、绑定数组的可变行数方式
3、自定义显示Cell

二、固定行数方式

import SwiftUI

struct TempView: View {
    var body: some View {
        NavigationView {
            List{
                //第一行
                NavigationLink.init("行1", destination: Text("行1内容"))
                //第二行
                NavigationLink.init("行2", destination: Text("行2内容"))
                //如果想要继续添加行数，只需要重复上述操作即可
            }
        }
    }
}
struct TempView_Previews: PreviewProvider {
    static var previews: some View {
        TempView()
    }
}

代码显示如下：点击行一进入 下一个页面，页面内容“行1内容”

三、绑定数组的可变行数方式

绑定数组需要用到@state关键字，他可以实现动态绑定效果，当用改关键字修饰的数组数量改变时，会动态的更新行数

import SwiftUI

class TempModel: Identifiable {
    
    var name: String?
    var content: String?
    init(name: String? = nil, content: String? = nil) {
        self.name = name
        self.content = content
    }
}

struct TempView: View {
    @State var models = [TempModel(name: "行1", content: "行1内容"),
                         TempModel(name: "行2", content: "行2内容")]
    var body: some View {
        NavigationView {
            List(models) { model in
                NavigationLink.init(model.name ?? "", destination: Text(model.content ?? ""))
            }
        }
    }
}

struct TempView_Previews: PreviewProvider {
    static var previews: some View {
        TempView()
    }
}

实现效果与第一种相同

四、自定义cell的创建

struct TempModel: Identifiable {
    let id = UUID()
    
    var name: String?
    var content: String?
    init(name: String? = nil, content: String? = nil) {
        self.name = name
        self.content = content
    }
}

struct TempView: View {
    @State var models = [
        BeaconSampleModel(name: "行1", content: "行1内容"),
        BeaconSampleModel(name: "行2", content: "行2内容")]
    
    var body: some View {
        NavigationView {
            List(models) { model in
                NavigationLink(destination: Text(model.content ?? "")) {
                    TempCell(title: model.name, content: model.content)
                }
                
                
            }
        }
    }
}

struct TempView_Previews: PreviewProvider {
    static var previews: some View {
        TempView()
    }
}

struct TempCell: View {
    var title: String?
    var content: String?
    
    var body: some View {
        Text(title ?? "")
    }
}

实现效果和第一种一样