如何在 SwiftUI 中使用 ActionSheet 操作离子列表项？

Question

我正在尝试使用 ActionSheet 来操作 List 的项目。我如何使用 ActionSheet 调用作为数据模型一部分的函数（在此示例中为 deleteItem）并操纵所选项目，类似于 .onDelete 所做的？

我的视图使用以下代码显示模型中的项目：

struct ItemManager: View {
    @ObservedObject var model: ItemModel

    var body: some View {
        List {
            ForEach(model.items) { item in
                ItemCell(item: item)
            }
            .onDelete { self.model.deleteItem(at: [=10=]) }
        }
    }
}

struct ItemCell: View {
    var item: Item
    @State private var isActionSheetVisible = false
    private var actionSheet: ActionSheet {
        let button1 = ActionSheet.Button.default(Text("Delete")){
            self.isActionSheetVisible = false
        }
        let button2 = ActionSheet.Button.cancel(){
            self.isActionSheetVisible = false
        }
        let buttons = [button1, button2]
        return ActionSheet(title: Text("Actions"), buttons: buttons)
    }

    var body: some View {
        VStack(alignment: .leading) {
            Button(action: {
                self.isActionSheetVisible = true
            }) {
                Text(item.title).font(.headline)
            }.actionSheet(isPresented: self.$isActionSheetVisible) {
                self.actionSheet
            }
        }
    }
}

我的模型有一些简单的属性和一个从集合中删除项目的函数：

struct Item: Identifiable, Equatable  {
    let title: String
    var id: String {
        title
    }
}

class ItemModel: ObservableObject {
    @Published var items: [Item] = [Item(title: "temp.1"), Item(title: "temp.2")]
    public func deleteItem(at indices: IndexSet) {
        indices.forEach { items.remove(at: [=11=]) }
    }
}

extension Item {
    static let previewItem = Item(title: "temp.3")
}

更新：在 Item 声明中添加 Equatable 以符合要求。

Answer 1

您可以尝试将 ItemModel 传递给 ForEach()，如下所示：

ForEach(model.items) { item in
    ItemCell(item: item, model: self.model)
}

然后在您的 ItemCell 中您可以：

struct ItemCell: View {
    var item: Item
    var model: ItemModel // Add the model variable

    @State private var isActionSheetVisible = false

    private var actionSheet: ActionSheet {
        let button1 = ActionSheet.Button.default(Text("Delete")) {
            // Get the index
            if let index = self.model.items.firstIndex(of: self.item) {
                // Delete the item based on the index
                self.model.items.remove(at: index)

                // Dismiss the ActionSheet
                self.isActionSheetVisible = false
            } else {
                print("Could not find item!")
                print(self.item)
            }
        }
    }
}

如何在 SwiftUI 中使用 ActionSheet 操作离子列表项？

How to manipulate the ion-list item using an ActionSheet in SwiftUI?

swiftui

actionsheet