Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not all WebImages are displayed in LazyVGrid #269

Open
Jeyhey opened this issue Jul 15, 2023 · 1 comment
Open

Not all WebImages are displayed in LazyVGrid #269

Jeyhey opened this issue Jul 15, 2023 · 1 comment

Comments

@Jeyhey
Copy link

Jeyhey commented Jul 15, 2023

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).

@Jeyhey
Copy link
Author

Jeyhey commented Aug 30, 2023

A work around is to add spacing to the VStack containing AvatarView above, like so e.g.: VStack(spacing: 4)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant