SwiftUI - 靜態列表

SwiftUI 提供了一個強大的元件，稱為列表。列表是一個容器，用於以單列結構儲存資料，其中每個資料片段稱為列表項。列表有兩種型別：靜態和動態。

靜態列表是指內容無法更改的列表，這意味著靜態列表的項是預定義的，並且不依賴於任何外部資料來源。在本章中，我們將學習如何建立靜態列表、自定義靜態列表以及更多關於靜態列表的知識。

在 SwiftUI 中建立靜態列表

在 SwiftUI 中，我們可以藉助 List 檢視建立靜態列表。它將所有指定的資料顯示在單列中，行中存在的資料稱為項。

它還使我們能夠從列表中選擇一個或多個項。我們還可以藉助此檢視提供的修飾符根據我們的需求自定義列表。

語法

以下是語法 -

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

示例 1

以下 SwiftUI 程式用於建立靜態列表。此列表儲存學科的名稱。

import SwiftUI
struct ContentView: View {
   var body: some View {
      
      // Creating a simple static list
      List{
         Text("Maths")
         Text("Science")
         Text("English")
         Text("GK")
      }
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中建立列表部分

在 SwiftUI 中，我們可以使用 Section 檢視建立一組一個或多個列表，並將它們顯示在部分中。或者我們可以說，部分用於在每個列表之間建立視覺分隔，它也用於指定檢視之間的層次結構。

我們還可以設定每個部分的標題和腳註。部分頂部存在的內容稱為標題，它通常用於描述部分包含的內容，而部分底部存在的內容稱為部分的腳註，它用於顯示與該部分相關的摘要或其他內容。

語法

以下是語法 -

List{
   Section{
      Text("item 1")
      Text("item 2") 
      Text("item 3")

   }header:{
      Text("My Header")
   }
   Section{
      Text("item 1")
      Text("item 2") 
      Text("item 3")

   }footer:{
      Text("My Footer")

   }
}

示例

以下 SwiftUI 程式用於從給定點繪製一條線。

import SwiftUI
struct ContentView: View {
   var body: some View {
      
      // Creating a static list with section
      List{
         Section{
            Text("Maths")
            Text("Science")
            Text("English")
            Text("GK")
         }header: {
            Text("Subjects")
         }
         Section{
            Text("Class 1")
            Text("Class 2")
            Text("Class 3")
            Text("Class 4")
         }header: {
            Text("Classes")
         }footer: {
            Text("These list contains all the enrolled students")
         }         
      }
   }
}
#Preview {
   ContentView()
}

輸出

自定義靜態列表

列表不僅限於簡單的文字項或部分，我們還可以新增切換按鈕、文字欄位、步進器、滑塊、圖示等。SwiftUI 允許我們將任何型別的資料與其中的元件一起儲存。讓我們建立一個包含以下內容的自定義列表 -

示例

以下 SwiftUI 程式用於建立自定義列表。這裡列表包含切換按鈕和帶標籤的內容。

import SwiftUI

struct ContentView: View {
   @State var select = true
   var body: some View {
      
      // Creating a custom static list
      List{
         Section{
            Toggle(isOn: $select){
               Text("Maths")
            }
            LabeledContent("Class 1", value: "off")
            Text("Science")
         }
      }
   }
}
#Preview {
   ContentView()
}

輸出