I have a list of approximately ~1000 items where each item(s) can be selected or unselected i.e something like ui preview here
My implementation (simplified) is essentially this
@State private var selectedIds: UUID[] = []
List {
Section {
// Header View
}
Section {
ForEach(items) { item in
let isSelected = selectedIds.contains(item.uuid)
ItemView(item: item, isSelected: isSelected, selectedIds: $selectedIds)
}
}
Section {
// Footer
}
}
So in essence, different styling gets applied to selected items and they all get a binding to selected id array where they will either add their own id or remove it when user taps on a “checkmark”.
This works well in general, but I noticed an issue when I do the following:
- I select first list item
- I scroll really fast to the middle of the list (past many items)
- I select another item
After I select 2nd item list “jumps” / “readjusts”, not sure how to explain it, but I end up in a random section of it and my selected item is way up. So it feels as if while I was scrolling really fast, some items were not “rendered / included in a list” and after I select 2nd item, state change triggers list to “refresh?” loading in all those previous items?
Not sure how to work around this and keep selection smooth