SwiftUI - 动态列表

在 SwiftUI 中，动态列表是可以动态更改其数据的列表。每当基础数据发生变化时，它都会自动更新并重新呈现。iOS 的联系人列表和消息框列表是动态列表的常见现实示例，每当添加新联系人或将新消息添加到列表中时，它们都会发生变化。因此，在本章中，我们将学习如何在 SwiftUI 中创建动态列表以及有关动态列表的更多信息。

在 SwiftUI 中创建动态列表

SwiftUI 提供预定义的列表视图来创建静态和动态列表。它在单个垂直可滚动列的行中显示数据。这是在不知道数据集实际长度的情况下存储数据的理想方式。因此，我们使用数据源(例如数组、结构、集合等)创建动态列表，并且每当数据源在 ForEach View 的帮助下更新时，列表都会自动更新。 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 {
      
      // 创建动态列表
      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)
      
      // 创建动态列表
      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)
         
         // 创建具有滑动删除功能的动态列表
         List {
            ForEach(elements, id: \.self) { language in
               Text(language)
            }
            .onDelete(perform: deleteElements) 
         }
         .padding()
      }
   }
   // 删除选定元素的函数
   func deleteElements(at offsets: IndexSet) {
      elements.remove(atOffsets: offsets)
   }
}
#Preview {
   ContentView()
}    

输出