有没有办法在SwiftUI中删除列表中的行？

Question

我已经在SwiftUI中创建了一个安静的简单列表，并希望使其可编辑，就像UIKit中的tableView一样。我想删除列表中所有已知手势的行（从右向左滑动）。

我尝试使用列表上方的按钮制作，但效果不太好，这对我的应用而言不可行。

struct singleIsland: Identifiable {
    let id: Int
    let name:String
}

var islands = [
singleIsland(id: 0, name: "Wangerooge"),
singleIsland(id: 1, name: "Spiekeroog"),
singleIsland(id: 2, name: "Langeoog")
]

var body: some View {
    VStack {

        List(islands) { island in
            Text(island.name)
        }
    }
}

Answer 1

struct SingleIsland {
    let name: String
}

struct ContentView: View {

    @State var islands = [
        SingleIsland(name: "Wangerooge"),
        SingleIsland(name: "Spiekeroog"),
        SingleIsland(name: "Langeoog")
    ]

    var body: some View {
        List {
            ForEach(islands.identified(by: \.name)) { island in
                Text(island.name)
            }.onDelete(perform: delete)
        }
    }

    private func delete(with indexSet: IndexSet) {
        indexSet.forEach { islands.remove(at: $0) }
    }
}

将数据包装在 a 中@State可确保视图在更改时重绘。

注意：

如果以List这种方式构建，我会收到编译器错误：

List(data) { item in
 [...]
}

它会抱怨onDelete不为存在List。

我的解决方法是使用ForEach里面的List, 以及onDelete它上面的函数。

Answer 2

是的，使用SwiftUI非常简单。

像这样更新您的代码...

struct SingleIsland: Identifiable {
    let id: Int
    let name:String
}

struct IslandListView: View {
    @State private var islands = [
        SingleIsland(id: 0, name: "Wangerooge"),
        SingleIsland(id: 1, name: "Spiekeroog"),
        SingleIsland(id: 2, name: "Langeoog")
    ]

    var body: some View {
        List {
            ForEach(islands.identified(by: \.name)) { island in
                Text(island.name)   
            }.onDelete(perform: delete)
        }
    }

    func delete(at offsets: IndexSet) {
        islands.remove(at: offsets)
    }
}

这将允许您滑动视图以删除行。

使用@State设置您的视图以依赖islands数组。对该阵列的任何更新都会触发视图重新加载。因此，通过从数组中删除一项，它将使更改对列表产生动画效果。