SwiftUI直通車系列（2）—— 列表視圖

SwiftUI直通車系列（2）—— 列表視圖

    列表視圖的開發中很是經常使用的頁面元素。SwiftUI中也有專門用來渲染列表的元素提供。

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))
    }
}

在預覽界面上與佈局狀況進行預覽，以下圖：

      

2、關聯數據

     列表中展現的數據每每是一組類似類型的數據。以上聯繫人行視圖爲例，咱們能夠定義一組聯繫人數據來填充到列表的行視圖中。首先定義一個結構體用來描述聯繫人信息，以下：

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

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

如上代碼所示，其中ContactModel定義了聯繫人的基本信息，modelData是一組聯繫人模型，實際應用中，modelData的數據來源多是網絡，也多是本地文件。修改RowContent代碼以下：

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的實時預覽功能也支持對一組組件進行預覽，示例以下：

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

效果以下圖所示：

3、使用列表組件

     SwiftUI中使用List組件來構建列表，將佈局好的列表行視圖嵌入其中便可展現出列表界面，以下：

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()
    }
}

此時，預覽效果以下圖所示：

在實際開發中，通常我會採用動態的方式來構建列表，經過對數據源的便利，能夠循環生成列表行，示例以下：

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

其中id是一個行標識字段，使用數據源中可以保證惟一的字段來設置便可。

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：805263726