SwiftUI List那些事(三）给 List 添加滑动删除

一开始我还以为跟tableview 一样删除属性在List 里，我在文档中搜索delete 并没找到相关删除方法，看文档找到了ForEach 里面包含了onDelete。

onDelete() 是作为 ForEach 的修饰符存在的，而不是直接用于 List 的修饰符。这是因为列表可以包含静态行。

核心API

  ForEach(dataItems) { item in  xxx}.onDelete(perform:xxx)

我们把上一章节的代码稍微改动下，使用ForEach 加载Row

//
//  ContentView.swift
//  List
//
//  Created by lsr on 2021/9/15.
//

import SwiftUI

//创建学生对象
struct StudentModel:Identifiable {
    let id = UUID() //学生id
    let name:String //学生姓名
    let age:String  //学生年龄
    let avatar:String
}

//列表数据源
var dataSource = [
    StudentModel(name:"李雷",age:"8",avatar:"lilei"),
    StudentModel(name:"露西",age:"7",avatar: "luc"),
    StudentModel(name:"小明",age:"7",avatar:"xiaom")
]

struct ContentView: View {
    @State var dataItems = dataSource;
    var body: some View {
        //导航视图
        NavigationView {
            //列表
            List{
                ForEach(dataItems) { item in
                //跳转Link 目标是DetailView 详情
                NavigationLink(
                    destination:DetailView(item: item)) {
                HStack(spacing:15, content: {
                    Image(item.avatar).resizable().frame(width:50,height:50)
                    VStack(alignment: .leading, spacing: 10, content: {
                       let name = "姓名:" + item.name
                       Text(name)
                       let age = "年龄:" + item.age
                        Text(age).foregroundColor(.gray).font(.system(size:16))
                    }).frame(height:50)
                })
              }
                }.onDelete(perform:deleteRow)
            }.navigationTitle("人员管理")
          }
    }
    
    func deleteRow(at offsets: IndexSet) {
        dataItems.remove(atOffsets: offsets)
     }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

还有一个地方改动就是把数据源赋值给了一个用 @State 修饰符修饰的变量，如果不这样改动的，删除刷新后数据还会重新回来

效果如下