I want to make an infinite scroll post view. I am using ScrollView + LazyVStack (if i use a List then the behavior is the same). The Row in this example is similar to the Row in my real project - text, then picture, then more text in vertical stack. The problem is that when I scroll, when the picture appears, twitching starts. I noticed that if you leave only the picture and remove the VStack, then the twitching becomes less, but they are still there. In this example, I am using AsyncImage from ios 15, but the same behavior with pictures from Nuke, SDWebImage and others. How can i get smooth scrolling without twitching?
import SwiftUI
struct ContentView: View {
let urls: [URL] = [
URL(string: "https://klike.net/uploads/posts/2019-05/1556945414_2.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426537_1.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426563_6.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426524_3.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426502_5.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426571_23.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426508_4.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426506_2.jpg")!,
URL(string: "https://klike.net/uploads/posts/2018-12/1544426569_9.jpg")!
]
var body: some View {
ScrollView {
LazyVStack {
ForEach(urls, id: \.self) { url in
Row(url: url)
}
}
}
}
}
struct Row: View {
let url: URL
let width = UIScreen.main.bounds.width
var body: some View {
VStack(spacing: 0) {
Text(url.absoluteString)
.font(.body)
// Here can be Nuke, SDWebImage or something else
AsyncImage(url: url) { image in
image
.resizable()
.scaledToFit()
} placeholder: {
ProgressView()
}
.frame(width: width, height: width * 1.666666666666667) // <- 800/480 image size
Text(url.absoluteString)
.font(.callout)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}