SwiftUI List 列表視圖教學

List 是 iOS App 中最常見的 UI 元件，對應到 UIKit 的 UITableView。它用來垂直顯示一系列的資料行 (Row)，並且自動支援捲動。

靜態列表

如果你的項目是固定的，可以直接像 VStack 一樣列出來：

List {
    Text("第一項")
    Text("第二項")
    Text("第三項")
}

動態列表

大多數情況下，我們需要顯示從陣列來的資料。這時候需要使用 ForEach 或者直接將陣列傳給 List。

值得注意的是，要在 List 中識別每一個項目，資料本身應該遵循 Identifiable 協議，或者顯式指定 id。

struct Ocean: Identifiable {
    let id = UUID() // 唯一識別碼
    let name: String
}

struct OceanListView: View {
    let oceans = [
        Ocean(name: "Pacific"),
        Ocean(name: "Atlantic"),
        Ocean(name: "Indian"),
        Ocean(name: "Arctic"),
        Ocean(name: "Southern")
    ]
    
    var body: some View {
        List(oceans) { ocean in // List 會自動遍歷陣列
            Text(ocean.name)
        }
    }
}

混合內容 (Section)

你可以在 List 中混合靜態和動態內容，並使用 Section 進行分組。

List {
    Section(header: Text("靜態區域")) {
        Text("關於我們")
        Text("版本資訊")
    }
    
    Section(header: Text("海洋列表")) {
        ForEach(oceans) { ocean in
            Text(ocean.name)
        }
    }
}
.listStyle(.grouped) // 改變列表樣式為群組風格

樣式 (.listStyle)

List 提供了多種內建樣式，會根據平台自動適配：

• .plain: 純列表 (無背景色)
• .grouped: 群組樣式 (類似 iOS 設定頁面)
• .insetGrouped: 圓角群組樣式 (iOS 15 設定頁面預設)
• .sidebar: 側邊欄樣式 (iPad/macOS 常用)

學會顯示列表後，接下來我們要學習如何讓使用者對列表進行操作，例如刪除和移動項目。