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()
}    

输出