SwiftUI - 動態列表

在 SwiftUI 中，動態列表是一個其資料可以動態更改的列表。每當底層資料發生更改時，它都會自動更新並重新渲染。iOS 的聯絡人列表和訊息框列表是動態列表的常見現實示例，它們會在新增新聯絡人或向列表中新增新訊息時發生變化。因此，在本節中，我們將學習如何在 SwiftUI 中建立動態列表以及更多關於動態列表的內容。

在 SwiftUI 中建立動態列表

SwiftUI 提供預定義的 List 檢視來建立靜態和動態列表。它以單列垂直可滾動列的行顯示資料。這是儲存資料而不必知道資料集實際長度的理想方式。因此，我們使用陣列、結構體、集合等資料來源建立動態列表，並且每當資料來源使用 ForEach 檢視更新時，列表都會自動更新。ForEach 檢視用於迭代給定的元素集合並唯一標識每個元素。

語法

以下是語法：

List{
   ForEach(dataSource, id: \.self){ item in
      Text(item)
   }
}

示例

以下 SwiftUI 程式用於建立動態列表。

import SwiftUI

struct ContentView: View {
   @State var elements = ["Python", "C++", "Swift", "C", "Java"]
   var body: some View {
      
      // Creating a dynamic list
      List(elements, id: \.self){language in Text(language)
      }
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中的動態列表中新增專案

有多種方法可以在動態列表中新增專案，但在這裡我們將使用 TextField 輸入新專案，並使用 .append 修飾符在用於建立動態列表的給定陣列中新增新值。

import SwiftUI

struct ContentView: View {
   
   @State private var elements = ["Python", "C++", "Swift", "C", "Java"]
   @State private var lang = ""
   
   var body: some View {
      
      Text("Programming Languages").font(.title)
      
      // Creating a dynamic list
      List(elements, id: \.self){language in Text(language)
      }
      
      TextField("Add Langugae", text: $lang).onSubmit {
            if lang.isEmpty{
               elements.append(lang)
               lang = ""
         }
      }.padding()
   }
}
#Preview {
   ContentView()
}    

輸出

從 SwiftUI 中的動態列表中刪除專案

要從動態列表中刪除專案，我們必須從底層資料來源中刪除資料，並且更改將自動反映在列表中。因此，我們使用 onDelete(perform:) 修飾符啟用滑動刪除手勢，它允許使用者從動態列表中刪除專案。在這裡，我們使用陣列作為資料來源，因此 onDelete() 修飾符使用 remove(at:) 方法從陣列中刪除元素。

import SwiftUI
struct ContentView: View {   
   @State private var elements = ["Python", "C++", "Swift", "C", "Java"]   
   var body: some View {
      VStack {
         Text("Programming Languages")
            .font(.title)
         
         // Creating a dynamic list with swipe-to-delete functionality
         List {
            ForEach(elements, id: \.self) { language in
               Text(language)
            }
            .onDelete(perform: deleteElements) 
         }
         .padding()
      }
   }
   // Function to delete selected elements
   func deleteElements(at offsets: IndexSet) {
      elements.remove(atOffsets: offsets)
   }
}
#Preview {
   ContentView()
}    

輸出