SwiftUI列表-快速滚动

Question

我有一个全屏元素列表。

    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)

当滚动时，是否可以将每个单元格固定在顶部？ 我不知道如何做到这一点。

谢谢！

- Stefano Vet

---

你说的 snap 是什么意思？快照吗？ - Aleksey Potapov

抱歉...当您滚动到下一行时，它会直接跳到顶部。滚动不是自由的。谢谢！ - Stefano Vet

Answer 1

在SwiftUI中，您可以使用DragGesture和ScrollViewReader来创建一个捕捉列表。

我们正在计算移动列表的速度。

这里是完整的代码示例：

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

- Sajjad Sarkoobi