时间戳

首页 > 解决方案 > SwiftUI 无限滚动（上下）

scroll - SwiftUI 无限滚动（上下）

问题描述

这是一个无限滚动的简单示例。如何将无穷大添加到向上滚动
并在开头插入行：

  rows.insert(contentsOf: Array(repeating: "Item 0", count: 20), at: 0)

像苹果一样在日历中做这个技巧。

struct Screen: View { 
    @State var rows: [String] = Array(repeating: "Item", count: 20)

    private func getNextPageIfNecessary(encounteredIndex: Int) { 
        guard encounteredIndex == rows.count - 1 else { return } 
        rows.append(contentsOf: Array(repeating: "Item", count: 20)) 
    }

    var body: some View {
      ...      
                 List(0..<rows.count, id: \.self) { index in
                           Text(verbatim: self.rows[index]) 
                               .onAppear {
                                   self.getNextPageIfNecessary(encounteredIndex: index)
                               }
                       }

标签： scrollswiftuiinfinity

解决方案

这是最简单的想法。它很粗糙，当然可以对其进行调整和改进（例如取消，更好的时机等），但是这个想法仍然存在……希望它会有所帮助。

struct TestInfinityList: View {
    @State var items: [Int] = Array(100...120)
    @State var isUp = false
    var body: some View {
        VStack {
            HStack {
                Button(action: { self.isUp = true }) { Text("Up") }
                Button(action: { self.isUp = false }) { Text("Down") }
            }
            Divider()
            List(items, id: \.self) { item in
                Text("Item \(item)")
            }
            .onAppear {
                DispatchQueue.main.async {
                    self.goNext()
                }
            }
        }
    }

    func goNext() {
        self.isUp ? self.moveUp() : self.moveDown()
    }

    func moveUp() {
        self.items.insert(self.items.first! - 1, at: 0)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
            self.goNext()
        }
    }

    func moveDown() {
        _ = self.items.removeFirst()
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
            self.items.append(self.items.last! + 1)
            self.goNext()
        }
    }
}

推荐阅读