Comment gérer .onDelete pour SwiftUI liste de tableau avec .inversé()

0

La question

Je cherche à faire une SwiftUI liste dans laquelle chaque nouvel élément de liste est présentée en haut de la liste. Pour ce faire, j'ai ajouté .inversé() pour le tableau passé dans la boucle ForEach, représenté par viewModel.itemList. J'ai également mis en place .onDelete pour gérer la suppression des éléments de la liste. Cependant, quand je supprime un élément, comme le dernier élément de la liste, au lieu de supprimer le dernier élément du tableau (l'élément en haut de la liste). Comment puis-je configurer .onDelete pour supprimer l'élément correct lorsque le tableau est inversé?

Voir mon code ci-dessous. Merci!

ContentView

struct ContentView: View {
    
    @StateObject var viewModel = ToDoListViewModel()
    @State private var listItemName = ""
        
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                List {
                    ForEach(viewModel.itemList.reversed()) { item in
                        Text(item.listItem)
                    }.onDelete { index in
                        self.viewModel.itemList.remove(atOffsets: index)
                    }
                }
                
                HStack {
                    TextField("Enter List Item", text: $listItemName)

                    Button(action: {
                        viewModel.addToList(ToDoModel(listItem: listItemName))
                        listItemName = ""
                    }) {
                        Image(systemName: "plus")
                            .font(.largeTitle)
                            .frame(width: 75, height: 75)
                            .foregroundColor(Color.white)
                            .background(Color.blue)
                            .clipShape(Circle())
                    }
                }.frame(minWidth: 100, idealWidth: 150, maxWidth: 500, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
                    .padding(.leading, 16)
                    .padding(.trailing, 16)
            }.navigationBarTitle("To Do List", displayMode: .inline)
        }
    }
}

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

Modèle

struct ToDoModel: Identifiable, Codable {
    var id = UUID()
    var listItem: String = ""
}

ViewModel

class ToDoListViewModel: ObservableObject {
    @Published var itemList = [ToDoModel]()

    func addToList( _ item: ToDoModel) {
        itemList.append(item)
    }
}
arrays swift swiftui swiftui-list
2021-11-21 23:25:33
2

La meilleure réponse

1

vous pouvez également essayer cette approche:

.onDelete { index in
    // get the item from the reversed list
    let theItem = viewModel.itemList.reversed()[index.first!]
    // get the index of the item from the viewModel, and remove it
    if let ndx = viewModel.itemList.firstIndex(of: theItem) {
        viewModel.itemList.remove(at: ndx)
    }
}
2021-11-22 00:15:13
1

Mise en garde: ce peut ne pas être le plus efficace avec des algorithmes de la méthode. Cependant, pour la simple suppression d'un List, il doit procéder à une amende.

.onDelete { offsets in
    let reversed = Array(viewModel.itemList.reversed()) //get the reversed array -- use Array() so we don't get a ReversedCollection
    let items = Set(offsets.map { reversed[$0].id }) //get the IDs to delete
    viewModel.itemList.removeAll { items.contains($0.id) } //remove the items with IDs that match the Set
}
2021-11-22 00:11:34

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................