詳述SwiftUI List

一、SwiftUI List背景

SwiftUI是一個建立在Swift編程語言基礎上的框架，它可以幫助開發者快速、簡單地構建用戶界面。SwiftUI由於其易用性和靈活性受到了廣泛的歡迎。其中，SwiftUI List是不可或缺的一個組件，可以在應用中顯示一組相關的數據。

SwiftUI List為應用中列表視圖的創建和設置提供了簡便的方法。它可以用於構建靜態和動態的列表，並可在列表的行中使用自定義視圖。此外，您可以使用特定的屬性來設置列表的外觀和行為。

下面我們來看看如何在SwiftUI中創建一個基本的List。

struct BasicList: View {
let fruits = ["Apple", "Banana", "Cherry", "Durian"]
var body: some View {
List(fruits, id: \.self) {
Text($0)
}
}
}

在上面這個例子中，我們首先創建了一個String類型的數組fruits並傳遞給了List。List內部的閉包則將數組中的每個元素作為輸入，並將其加工成一個Text視圖展示在UI上。在創建List時，我們還將數組元素的唯一標識符設置為字元串本身，方便後續處理。

二、SwiftUI List屬性

SwiftUI的List提供了諸多配置屬性，這些屬性可以幫助我們更加輕鬆和靈活地創建我們所需的列表。下面介紹幾個比較常用的屬性：

1.列表樣式

列表的樣式可以通過 style 屬性進行設置，目前列表有兩種基礎的樣式可以選擇：

• DefaultListStyle
• InsetListStyle

DefaultListStyle 為列表視圖提供了一個常規但現代化的外觀，並可根據需要進行自定義。InsetListStyle 則使其每行左邊距離比較大，形象地表示了將每行數據設置為按鈕的常見用法。下面是它們的示例：

struct StyleList: View {
let fruits = ["Apple", "Banana", "Cherry", "Durian"]
var body: some View {
List(fruits, id: \.self) {
Text($0)
}.listStyle(DefaultListStyle())
}
}

struct InsetList: View {
let fruits = ["Apple", "Banana", "Cherry", "Durian"]
var body: some View {
List(fruits, id: \.self) {
Text($0)
}.listStyle(InsetListStyle())
}
}

2.背景顏色

SwiftUI List的背景顏色可以使用 background() 函數附加到 List 上來設置。下面是一個示例：

struct ColorList: View {
let fruits = ["Apple", "Banana", "Cherry", "Durian"]
var body: some View {
List(fruits, id: \.self) {
Text($0)
}.background(Color.red)
}
}

三、SwiftUI List自定義行

SwiftUI List不僅可以用於顯示文本等簡單視圖，還能夠實現自定義行。在 List 構建中可以使用 rowContent 參數，它表示在列表中要呈現的視圖內容。我們來看看下面的代碼：

struct CustomRowView: View {
let fruits = ["Apple", "Banana", "Cherry", "Durian"]
var body: some View {
List(fruits, id: \.self) { fruit in
VStack(alignment: .leading) {
Text(fruit)
Text("Hello there!")
}
}
}
}

在上面這個示例中，我們使用了一個VStack封裝了兩個Text視圖，這樣每個列錶行就同時包含了 圖標 和 名稱。通過設置 VStack 的 alignment 參數為.leading，我們能夠使列錶行向左對齊。

四、SwiftUI List高級使用

SwiftUI的List不僅支持基本的展示外觀，還支持各種高級用法。比如，您可以使用 identifiable 協議實現對動態數據集的處理。

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

struct AdvancedList: View {
let fruits = [
Fruit(name: "Apple", description: "Red and round!"),
Fruit(name: "Banana", description: "Yellow and yummy!"),
Fruit(name: "Cherry", description: "Sweet and small!"),
Fruit(name: "Durian", description: "Smelly and spiky!")
]
var body: some View {
List(fruits) { fruit in
VStack(alignment: .leading) {
Text(fruit.name)
Text(fruit.description)
}
}
}
}

在上面這個示例中，我們定義了一個名為Fruit的結構體來存儲具體的數據，該結構體符合 identifiable 協議。在創建 List 的時候，我們直接將存儲了 Fruit 結構體的數組傳給 List, 就可以利用 identifiable 協議中定義的唯一標識符 UUID 進行每個 Fruit 實例的區分了。

總結

SwiftUI List 作為一種用於顯示列表的視圖控制項，在 iOS 應用程序中扮演著舉足輕重的角色。本文介紹了如何創建基本列表，如何配置列表和行的樣式，以及如何利用 SwiftUI 的諸多高級特性進行更靈活地使用和處理。