I have a list of avatars that I display as WebImage in a LazyVGrid.
The avatar is defined like this:
struct AvatarView: View {
let url: String
let size: CGFloat
var body: some View {
WebImage(url: URL(string: url))
.resizable()
.placeholder { Rectangle().foregroundColor(.secondary.opacity(0.5)) }
.indicator(.activity)
.transition(.fade)
.scaledToFill()
.frame(width: size, height: size, alignment: .center)
.clipShape(Circle())
}
}
My LazyVGrid roughly looks like this:
private struct guests: View {
let g: [(Int, String)] = (1...17).map{i in (i, "https://i.ytimg.com/vi/SzMEdzH9gb8/hqdefault.jpg") }
private let columns = [GridItem(.adaptive(minimum: 80))]
var body: some View {
VStack {
HStack {
Text("Guests").padding(.vertical, 8).padding(.leading, 8)
Spacer()
}
LazyVGrid(
columns: columns, spacing: 20
) {
ForEach(g, id: \.0) { u in
VStack {
AvatarView(url: u.1, size: 60.0)
Text("Johny")
}
}
}
.padding(.horizontal)
}
.padding(.bottom, 40)
.padding(.top, 10)
}
}
On my device (iPhone 13 mini) these 17 items are displayed in 6 rows (up to 3 items per row).
What happens now is that the LazyVGrid often displays only 15 (i.e. all but the last row) of the 17 items. When I navigate to a new screen and then go back, often the 17 items are correctly displayed. Then when scrolling in the screen it can happen that again only 15 items are displayed.
This wrong behaviour does not seem to happen when I use AsyncImage instead of WebImage. Also I have the impression that it does not happen when I only display the avatar without the name in the item of the LazyVGrid (though I am not certain as I just observed it when preparing this Github issue).
I have a list of avatars that I display as
WebImage
in aLazyVGrid
.The avatar is defined like this:
My LazyVGrid roughly looks like this:
On my device (iPhone 13 mini) these 17 items are displayed in 6 rows (up to 3 items per row).
What happens now is that the LazyVGrid often displays only 15 (i.e. all but the last row) of the 17 items. When I navigate to a new screen and then go back, often the 17 items are correctly displayed. Then when scrolling in the screen it can happen that again only 15 items are displayed.
This wrong behaviour does not seem to happen when I use
AsyncImage
instead ofWebImage
. Also I have the impression that it does not happen when I only display the avatar without the name in the item of the LazyVGrid (though I am not certain as I just observed it when preparing this Github issue).