SwiftUI的List View和UIKit中的UITableView很相似，它可以根據你的需求加載靜態或者動態數據。不同的是，List使用起來更加的簡單:我們不需要在storyboard或者Xib中創建cell，也不需要使用代碼注冊cell，不需要告訴它要有多少行內容，當然也不需要dequeue cell以及手動設置cell等等。

一、創建一個靜態數據列表

想要創建一個靜態數據列表，你首先需要確定每一個cell的樣式。我們可以自定義一個簡單的cell，代碼如下：

struct StreetRow: View {
    
    var name: String
    
    var body: some View {
        Text("The street name is \(name)")
    }
}

這樣我們就定義了一個簡單的cell，cell上只有一行文字，現在可以創建一個List View，并添加你需要的數量的cell，像這樣：

struct ListViewDemo: View {
    var body: some View {
        List{
            //當然可以有多種不同的Row哦
            StreetRow(name: "The Lodon Street")
            StreetRow(name: "The Joe's Street")
            StreetRow(name: "The House Street")
        }
    }
}

這樣就創建了一個最簡單的列表，這里不得不說swiftUI確實是強大，短短幾行代碼就可以創建出UITableView需要書寫大量代碼才能看到的效果。

二、創建一個動態數據列表

如果想動態的生成items，比如根據接口返回的數據生成列表，就需要用到動態列表。按照UIKit中的習慣，首先我們需要一個model存儲這些數據，SwiftUI也類似，我們需要創建一個Street的結構體，并遵循Identifiable協議，此協議中只有一個必須的屬性：id，它用來讓SwiftUI區分不同的item。

struct Street: Identifiable {
    var id = UUID()
    var name: String
}

這里我們給id初始化為UUID():

UUID: which can be used to uniquely identify types, interfaces, and other items.
UUID可以被用來作為不同item的標記，這樣swiftUI就知道當前是哪個

接下來需要修改StreetRow的內容：

struct StreetRow: View {
    var street: Street
  
    var body: some View {
        Text("The street name is \(street.name)")
    }
}

最后在準備我們需要的數據，并讓其動態加載到頁面上，實際開發中往往是從接口返回的數據，這里準備了幾條假數據來說明使用：

struct ListViewDemo: View {
    var body: some View {
        let street1 = Street(name: "The Lodon Street")
        let street2 = Street(name: "The Joe's Street")
        let street3 = Street(name: "The House Street")
        //數據數組
        let streets = [street1, street2, street3]
        
        return List(streets){ street in
            StreetRow(street: street)
        }
    }
}

SwiftUI會根據streets數組中的數據每次執行閉包創建cell，最終顯示頁面。其實針對這種情況下還有更簡單的創建List的方式：

return List(streets, rowContent: StreetRow.init)

實際上List有很多的創建的方式，剩下的大家可以慢慢探索哦。

三、設置左滑刪除cell

struct ListViewDemo: View {
    
    //數據數組
    @State private var streets = [Street(name: "The Lodon Street"), Street(name: "The Joe's Street"), Street(name: "The House Street")]
    
    var body: some View {
        
        func deleteRow(at offsets:IndexSet) {
            streets.remove(atOffsets:offsets)
        }
        
        return List{
            ForEach(streets, id: \.self) { street in
                StreetRow(street: street)
            }.onDelete(perform: deleteRow)
        }
    }
}

實現起來是不是很簡單，但是需要注意的是：使用ForEach結構體，需要保證street遵守Hashable協議：

struct Street: Identifiable,Hashable {
    var id = UUID()
    var name: String
}

這里你可能會好奇，刪除掉cell后數據是怎么同步并實時更新頁面的，我們注意到數據源streets使用了@State修飾，這就是數據綁定，后面的章節會有專門的講解哦。

四、List添加section分組以及設置grouped類型

struct ListViewDemo: View {
    var body: some View {
        return List{
            Section(header:Text("some streets one"), footer: Text("Fotter1")){
                TaskRow()
                TaskRow()
                TaskRow()
            }
            Section(header:Text("some streets two"), footer: Text("Fotter2")){
                TaskRow()
                TaskRow()
                TaskRow()
            }
        }
    }
}

struct TaskRow: View {
    var body: some View {
        Text("Task data goes here")
    }
}

和UITableView一樣，你可以讓數據分組顯示，并為每一個section添加header和fotter，效果如下：

在UITableView中我們可以設置plain和grouped兩種樣式，而默認是plain樣式，SwiftUI也一樣。在swiftUI中設置grouped樣式很簡單，只需要為list添加相應的listStyle modifier：

struct ListViewDemo: View {
    var body: some View {
        return List{
            Section(header:Text("some streets one"), footer: Text("Fotter1")){
                TaskRow()
                TaskRow()
                TaskRow()
            }
            Section(header:Text("some streets two"), footer: Text("Fotter2")){
                TaskRow()
                TaskRow()
                TaskRow()
            }
        }.listStyle(GroupedListStyle())
    }
}

效果如下：

五、點擊cell跳轉的實現

首先需要新建一個詳情頁ListViewDetial，因為只是演示跳轉，所以里面使用默認的代碼。

struct ListViewDemo: View {
    var body: some View {
        let streets = [
        Street(name: "The Lodon Street"), 
        Street(name: "The Joe's Street"), 
        Street(name: "The House Street")
        ]
        
        return NavigationView{
            List(streets){ street in
                NavigationLink(destination:ListViewDetial()){
                    StreetRow(street: street)
                }
            }.navigationBarTitle("Streets")
        }
    }
}

實現跳轉的重點是：List包裹在NavigationView中，并且cell也需要包裹進NavigationLink中，并設置destination屬性，其他的和上面介紹的沒有區別。

好了，本篇文章介紹了swiftUI中List的創建，使用，設置以及點擊跳轉，基本包含了List的日常使用。每天進步一點點，成為更好的自己！有問題歡迎留言交流，歡迎關注！

歡迎關注公眾號：iOS進化論，里面全部是iOS知識的干貨，最近在做SwiftUI系列，歡迎大家和我一起追趕技術潮流，勇往直前！