SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


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

输出

动态列表