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