双向无限垂直滚动视图（在顶部/底部动态添加项目），当您添加到列表开始时不会干扰滚动位置

Question

我追求的是双向无限的垂直滚动视图：向上滚动到顶部或向下滚动到底部会导致动态添加更多项目。我遇到的几乎所有帮助都只与范围无限的底部有关。我确实遇到了这个相关的答案，但这不是我特别想要的（它根据持续时间自动添加项目，并且需要与方向按钮交互以指定滚动方式）。然而，这个不太相关的答案非常有帮助。根据那里提出的建议，我意识到我可以随时保留可见项目的记录，如果它们恰好是顶部/底部的 X 个位置，则在列表的开始/结束索引处插入一个项目。

另一个注意事项是我让列表从中间开始，因此除非您向上/向下移动 50%，否则无需添加任何内容。

明确地说，这是一个日历屏幕，我希望用户可以自由滚动到任何时间。

    struct TestInfinityList: View {
    
    @State var visibleItems: Set<Int> = []
    @State var items: [Int] = Array(0...20)
    
    var body: some View {
        ScrollViewReader { value in
        
            List(items, id: \.self) { item in
                VStack {
                    Text("Item \(item)")
                }.id(item)
                .onAppear {
                    self.visibleItems.insert(item)
                    
                    /// if this is the second item on the list, then time to add with a short delay
                    /// another item at the top
                    if items[1] == item {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
                            withAnimation(.easeIn) {
                                items.insert(items.first! - 1, at: 0)
                            }
                        }
                    }
                }
                .onDisappear {
                    self.visibleItems.remove(item)
                }
                .frame(height: 300)
            }
            .onAppear {
                value.scrollTo(10, anchor: .top)
            }
        }
    }
}

除了一个小但重要的细节外，这大部分工作正常。当从顶部添加一个项目时，取决于我向下滚动的方式，它有时可能会跳动。这在附加的夹子末端最为明显。

Answer 1

我尝试了您的代码，但无法使用 List OR ScrollView 修复任何问题，但可以作为无限滚动的 uiscrollview 。

1.将 uiscrollView 包装在 UIViewRepresentable 中

struct ScrollViewWrapper: UIViewRepresentable {
    
    private let uiScrollView: UIInfiniteScrollView
    
    init<Content: View>(content: Content) {
         uiScrollView = UIInfiniteScrollView()
    }

    init<Content: View>(@ViewBuilder content: () -> Content) {
        self.init(content: content())
    }

    func makeUIView(context: Context) -> UIScrollView {
        return uiScrollView
    }

    func updateUIView(_ uiView: UIScrollView, context: Context) {
        
    }
}

2.这是我无限滚动uiscrollview的全部代码

class UIInfiniteScrollView: UIScrollView {
    
    private enum Placement {
        case top
        case bottom
    }
    
    var months: [Date] {
        return Calendar.current.generateDates(inside: Calendar.current.dateInterval(of: .year, for: Date())!, matching: DateComponents(day: 1, hour: 0, minute: 0, second: 0))
    }
    
    var visibleViews: [UIView] = []
    var container: UIView! = nil
    var visibleDates: [Date] = [Date()]
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    //MARK: (*) otherwise can cause a bug of infinite scroll
    
    func setup() {
        contentSize = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 6)
        scrollsToTop = false // (*)
        showsVerticalScrollIndicator = false
        
        container = UIView(frame: CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height))
        container.backgroundColor = .purple
        
        addSubview(container)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        recenterIfNecessary()
        placeViews(min: bounds.minY, max: bounds.maxY)
    }

    func recenterIfNecessary() {
        let currentOffset = contentOffset
        let contentHeight = contentSize.height
        let centerOffsetY = (contentHeight - bounds.size.height) / 2.0
        let distanceFromCenter = abs(contentOffset.y - centerOffsetY)
        
        if distanceFromCenter > contentHeight / 3.0 {
            contentOffset = CGPoint(x: currentOffset.x, y: centerOffsetY)
            
            visibleViews.forEach { v in
                v.center = CGPoint(x: v.center.x, y: v.center.y + (centerOffsetY - currentOffset.y))
            }
        }
    }
    
    func placeViews(min: CGFloat, max: CGFloat) {
        
        // first run
        if visibleViews.count == 0 {
            _ = place(on: .bottom, edge: min)
        }
        
        // place on top
        var topEdge: CGFloat = visibleViews.first!.frame.minY
        
        while topEdge > min {topEdge = place(on: .top, edge: topEdge)}
        
        // place on bottom
        var bottomEdge: CGFloat = visibleViews.last!.frame.maxY
        while bottomEdge < max {bottomEdge = place(on: .bottom, edge: bottomEdge)}
        
        // remove invisible items
        
        var last = visibleViews.last
        while (last?.frame.minY ?? max) > max {
            last?.removeFromSuperview()
            visibleViews.removeLast()
            visibleDates.removeLast()
            last = visibleViews.last
        }

        var first = visibleViews.first
        while (first?.frame.maxY ?? min) < min {
            first?.removeFromSuperview()
            visibleViews.removeFirst()
            visibleDates.removeFirst()
            first = visibleViews.first
        }
    }
    
    //MARK: returns the new edge either biggest or smallest
    
    private func place(on: Placement, edge: CGFloat) -> CGFloat {
        switch on {
            case .top:
                let newDate = Calendar.current.date(byAdding: .month, value: -1, to: visibleDates.first ?? Date())!
                let newMonth = makeUIViewMonth(newDate)
                
                visibleViews.insert(newMonth, at: 0)
                visibleDates.insert(newDate, at: 0)
                container.addSubview(newMonth)
                
                newMonth.frame.origin.y = edge - newMonth.frame.size.height
                return newMonth.frame.minY
                
            case .bottom:
                let newDate = Calendar.current.date(byAdding: .month, value: 1, to: visibleDates.last ?? Date())!
                let newMonth = makeUIViewMonth(newDate)
                
                visibleViews.append(newMonth)
                visibleDates.append(newDate)
                container.addSubview(newMonth)
                
                newMonth.frame.origin.y = edge
                return newMonth.frame.maxY
        }
    }
        
    func makeUIViewMonth(_ date: Date) -> UIView {
        let month = makeSwiftUIMonth(from: date)
        let hosting = UIHostingController(rootView: month)
        hosting.view.bounds.size = CGSize(width: UIScreen.main.bounds.width,       height: UIScreen.main.bounds.height * 0.55)
        hosting.view.clipsToBounds = true
        hosting.view.center.x = container.center.x
        
        return hosting.view
    }
    
    func makeSwiftUIMonth(from date: Date) -> some View {
        return MonthView(month: date) { day in
            Text(String(Calendar.current.component(.day, from: day)))
        }
    }
}

仔细观察这个，它几乎是不言自明的，取自 WWDC 2011 的想法，当你足够接近边缘时，你将偏移重置到屏幕中间，这一切都归结为平铺你的视图，使它们都出现在顶部彼此的。如果您想对该课程有任何说明，请在评论中提问。当你弄清楚这两个之后，你就可以粘合 SwiftUIView 了，它也在提供的类中。目前，在屏幕上看到视图的唯一方法是为主机视图指定显式大小，如果您知道如何使 SwiftUIView 大小为主机视图，请在评论中告诉我，我正在寻找对此的答案。希望代码对大家有帮助，如果有问题请留言。