SwiftUI - 列表

在 SwiftUI 中，列表檢視是一個容器，用於在一個可滾動的單列中儲存大型資料集合。它通常用於儲存分層、動態和靜態資料。它是設計應用程式使用者介面中最重要的和最有用的元件。因此，在本章中，我們將討論如何建立列表、列表的型別等。

在 SwiftUI 中建立列表

在 SwiftUI 中，我們可以使用 List 檢視建立列表。列表檢視將所有資料排列成行，然後將這些行顯示在一個垂直可滾動的列中。我們可以在列表中儲存任意數量的資料，單個 UI 可以包含多個列表。

語法

以下是語法：

List{
   Text("Item 1")
   Text("Item 2")
   Text("Item 3")
}

示例

以下 SwiftUI 程式建立了一個列表。

import SwiftUI
struct ContentView: View {    
   var body: some View {
      VStack{
         Text("Contacts")
         List{
            Text("Mohan")
            Text("Sohan")
            Text("Monika")
            Text("Mona")
            Text("Sona")
         }
      }
      
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的列表型別

在 SwiftUI 中，我們可以使用 List 檢視建立三種類型的列表，它們如下所示：

靜態列表
動態列表
分層列表

SwiftUI 中的靜態列表

靜態列表是指行資料固定的列表，這意味著我們無法更改行的數。我們可以使用 List 檢視建立靜態列表。預設情況下，靜態列表使用 InsetGrouped 樣式來設定列表的外觀，但我們可以使用 listStyle() 修飾符更改它。

示例

以下 SwiftUI 程式建立了一個靜態列表。

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Text("Wi-Fi")
            Text("Mobile Network")
            Text("Bluetooth")
            Text("Connection and sharing")
            Text("Wallpaper & Style")
            Text("Home Screen")
            Text("Display and Brightness")
         }
      }
      
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的動態列表

動態列表是指我們可以更改資料的列表。或者我們可以說，當我們使用陣列、集合等集合時，可以使用動態列表，這些集合的資料可能會隨著時間而改變。

示例

以下 SwiftUI 程式建立了一個動態列表。

import SwiftUI
struct ContentView: View {   
   // Array
   let elements = ["Sohan", "Mohan", "Monika", "Sona", "Mona", "Seemran"]   
   var body: some View {
      VStack{         
         // Dynamic List
         Text("Contacts")
         List(elements, id:\.self){ x in
            Text(x)
         }
      }      
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的分層列表

分層列表是一種特殊的列表，我們可以在其中以巢狀結構顯示資料，此處專案將以展開或摺疊列表的形式顯示。當我們處理具有父子關係的資料時，此類列表非常有用。我們可以使用 List 檢視以及 DisclousreGroup 或 OutlineGroup 建立分層列表。

DisclousreGroup 在給定的列表中建立一個可展開和可摺疊的部分。只要我們單擊該部分，它就會一直可見，而 OutlineGroup 用於顯示已經處於層次結構中的資料，它會自動處理元素的展開和摺疊。它通常與符合 Identifiable 協議的資料一起使用。

示例

以下 SwiftUI 程式建立了一個分層列表：

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Contacts")
         List {
            DisclosureGroup("Studets") {
               Text("Mohan")
               Text("Sohan")
               Text("Meena")
            }
            DisclosureGroup("Teachers") {
               Text("Sonika")
               Text("Preeti")
               Text("Mina")
            }
         }
      }      
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的列表部分

在 SwiftIUI 中，我們還可以將列表分成相關專案或資料的多個部分。或者我們可以說，部分用於將列表分成相似型別資料的組。它增強了列表的可讀性，也使列表更易於導航。單個列表可以包含多個部分。

語法

以下是語法：

List{
   Section{
      // data
   }
   Section{

   }
}

示例

以下 SwiftUI 程式建立了一個包含部分的列表：

import SwiftUI
struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Section{
               Text("Wi-Fi")
               Text("Mobile Network")
               Text("Bluetooth")
               Text("Connection and sharing")
            }
            Section{
               Text("Wallpaper & Style")
               Text("Home Screen")
               Text("Display and Brightness")
            }
         }
      }      
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中帶有標題和頁尾的部分

我們還可以為列表提供標題和頁尾。標題用於為部分提供標題，告訴使用者以下部分包含什麼樣的資料，它位於部分的頂部。

而部分的頁尾則提供有關相應部分的更多資訊。它位於部分的底部。

語法

以下是語法：

List{
   Section(header:Text("")){
      // data
   }
   Section{

   }
}

示例

以下 SwiftUI 程式建立了一個包含帶有標題和頁尾的部分的列表。

import SwiftUI

struct ContentView: View {   
   var body: some View {
      VStack{
         Text("Settings")
         List{
            Section{
               Text("Wi-Fi")
               Text("Mobile Network")
               Text("Bluetooth")
               Text("Connection and sharing")
            }header: {
               Text("Network")
            }footer: {
               Text("All the network related Setting")
            }
            Section{
               Text("Wallpaper & Style")
               Text("Home Screen")
               Text("Display and Brightness")
            }header: {
               Text("Display Setting")
            }            
          
         }
      }      
   }
}
#Preview {
   ContentView()
}

輸出

列印頁面