swiftui list - snap scrolling - xcode

Question

i have a fullscreen list of element.
VStack{
List {
ForEach(books, id: \.id) { book in
Text(book.title)
.background(Color.yellow) // text background
.listRowBackground(Color.blue) // cell background
}
.frame(height: UIScreen.main.bounds.height)
}
}
.background(Color.red)
.edgesIgnoringSafeArea(.all)
Is possible to snap every cell on top when scrolling? I have no idea how to do this.
Thank you!

Answer 1

You can use DragGesture and ScrollViewReader to create a snapping List in SwiftUI.
We are calculating the velocity to move the list.
Here is a full sample Code:
struct SampleSnappingListView: View {
enum ScrollDirection {
case up
case down
case none
}
#State var scrollDirection: ScrollDirection = .none
var body: some View {
VStack {
ScrollViewReader { reader in
List {
ForEach(0...20, id:\.self) { index in
ZStack {
Color((index % 2 == 0) ? .red : .green)
VStack {
Text("Index \(index)")
.font(.title)
}
.frame(height: UIScreen.main.bounds.height/2)
}
.clipShape(Rectangle())
.id(index)
.simultaneousGesture(
DragGesture(minimumDistance: 0.0)
.onChanged({ dragValue in
let isScrollDown = 0 > dragValue.translation.height
self.scrollDirection = isScrollDown ? .down : .up
})
.onEnded { value in
let velocity = CGSize(
width: value.predictedEndLocation.x - value.location.x,
height: value.predictedEndLocation.y - value.location.y
)
if abs(velocity.height) > 100 {
withAnimation(.easeOut(duration: 0.5)) {
let next = index + (scrollDirection == .down ? 1 : -1)
reader.scrollTo(next, anchor: .top)
}
}
}
)
}
.listRowSeparator(.hidden)
.listRowBackground(Color.clear)
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
}
.listStyle(.plain)
}
}
}
}
struct SampleSnappingListView_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
SampleSnappingListView()
.navigationTitle("Snapping list")
.navigationBarTitleDisplayMode(.inline)
}
}
}