In the release notes to iOS 13 Apple said:
The Binding structure’s conditional conformance to the Collection protocol is removed. (51624798). And then suggested iterating through arrays this way:
var body: some View {
List(landmarks.indexed(), id: \.1.id) { (index, landmark) in
Toggle(landmark.name, isOn: self.$landmarks[index].isFavorite)
}
}
But you also need to implement this:
struct IndexedCollection<Base: RandomAccessCollection>: RandomAccessCollection {
typealias Index = Base.Index
typealias Element = (index: Index, element: Base.Element)
let base: Base
var startIndex: Index { base.startIndex }
var endIndex: Index { base.startIndex } // Possibly this should be endIndex?
func index(after i: Index) -> Index {
base.index(after: i)
}
func index(before i: Index) -> Index {
base.index(before: i)
}
func index(_ i: Index, offsetBy distance: Int) -> Index {
base.index(i, offsetBy: distance)
}
subscript(position: Index) -> Element {
(index: position, element: base[position])
}
}
extension RandomAccessCollection {
func indexed() -> IndexedCollection<Self> {
IndexedCollection(base: self)
}
}
So first of all there appears to be a typo on line 6: that might need to be changed to base.endIndex
but it doesn't work either way. It's a shame because it looks like a neat way to iterate with both element and index. So, is there a mistake I am making in how I'm implementing it?
Code:
import SwiftUI
let screenWidth = UIScreen.main.bounds.size.width
let screenHeight = UIScreen.main.bounds.size.height
struct SingleBall: Identifiable {
var id = UUID()
var position = CGPoint.zero
var isDeleting = false
}
class BallStorage: ObservableObject {
@Published var balls: [SingleBall] = [
SingleBall(position: CGPoint(x: 110, y: 220)),
SingleBall(position: CGPoint(x: 150, y: 120)),
SingleBall(position: CGPoint(x: 200, y:160)),
SingleBall(position: CGPoint(x: 200, y: 200))
]
}
struct StartScreen: View {
@ObservedObject var ballStorage = BallStorage()
@State var isDeleting = false
var body: some View {
ZStack { // stack of balls
ForEach(ballStorage.balls.indexed(), id: \.1.id) {
(number, item) in
littleBall(
ballStorage: ballStorage,
numberInArray: number )
}
}
.frame(width:screenWidth, height:screenHeight) //end stack balls
}
}
Littleball is a thing that just displays a black circle. So when I am doing the same thing by iterating over indices, four circles get rendered nicely (but looking for alternative way because you can't delete things from the array with indices).
With the above code nothing gets rendered. Why?
EDIT: To clarify, the .indexed() implementation is obviously also in the scope of the posted code.