SwiftUI直通车系列（2）—— 列表视图

    列表视图的开发中很是经常使用的页面元素。SwiftUI中也有专门用来渲染列表的元素提供。swift

1、编写行视图

      列表其实是一组行视图的组合，在布局列表视图以前，你首先须要定义好行视图的布局。例如，咱们使用一个Image元素和两个Text元素来布局一个简单的联系人行视图。网络

struct RowContent:View {
    var body: some View {
        HStack(alignment:.top) {
            Image("demo").resizable().frame(width: 70, height: 70)
            VStack(alignment:.leading, spacing: 10) {
                Text("王小丫").bold().font(Font.system(size: 25))
                Text("15137344444").font(Font.system(size: 20))
            }
            Spacer()
            }.padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
    }
}

在预览界面上与布局状况进行预览，以下图：ide

2、关联数据

     列表中展现的数据每每是一组类似类型的数据。以上联系人行视图为例，咱们能够定义一组联系人数据来填充到列表的行视图中。首先定义一个结构体用来描述联系人信息，以下：布局

struct ContactModel {
    var name:String
    var phone:String
}

let modelData = [
    ContactModel(name:"王小丫", phone:"15137348888"),
    ContactModel(name:"李小二", phone:"15137348989")
]

如上代码所示，其中ContactModel定义了联系人的基本信息，modelData是一组联系人模型，实际应用中，modelData的数据来源多是网络，也多是本地文件。修改RowContent代码以下：spa

struct RowContent:View {
    
    var contactModel:ContactModel
    
    var body: some View {
        HStack(alignment:.top) {
            Image("demo").resizable().frame(width: 70, height: 70)
            VStack(alignment:.leading, spacing: 10) {
                Text(self.contactModel.name).bold().font(Font.system(size: 25))
                Text(self.contactModel.phone).font(Font.system(size: 20))
            }
            Spacer()
            }.padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
    }
}

SwiftUI的实时预览功能也支持对一组组件进行预览，示例以下：code

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            RowContent(contactModel: modelData[0])
            RowContent(contactModel: modelData[1])
        }.previewLayout(.fixed(width: 400, height: 80))
    }
}

效果以下图所示：blog

3、使用列表组件

     SwiftUI中使用List组件来构建列表，将布局好的列表行视图嵌入其中便可展现出列表界面，以下：ci

struct ListContent:View {
    var body: some View {
        List {
           RowContent(contactModel: modelData[0])
           RowContent(contactModel: modelData[1])
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListContent()
    }
}

此时，预览效果以下图所示：开发

在实际开发中，通常我会采用动态的方式来构建列表，经过对数据源的便利，能够循环生成列表行，示例以下：class

struct ListContent:View {
    var body: some View {
        List(modelData, id: \.name) { model in
           RowContent(contactModel: model)
        }
    }
}

其中id是一个行标识字段，使用数据源中可以保证惟一的字段来设置便可。

专一技术，热爱生活，交流技术，也作朋友。

——珲少 QQ群：805263726