如何解决双向无限垂直滚动视图在顶部/底部动态添加项目，当您添加到列表开始时不会干扰滚动位置
我追求的是双向无限的垂直滚动视图：向上滚动到顶部或向下滚动到底部会导致动态添加更多项目。我遇到的几乎所有帮助都只与范围无限的底部有关。我确实遇到过 this relevant answer 但这不是我特别想要的（它会根据持续时间自动添加项目，并且需要与方向按钮交互以指定滚动方式）。然而，这个 less relevant answer 非常有帮助。根据那里提出的建议，我意识到我可以随时保留可见项目的记录，如果它们恰好是顶部/底部的 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)
}
}
}
}
除了一个小而重要的细节外，这大部分工作正常。当一个项目从顶部添加时，取决于我向下滚动的方式，它有时可能会跳动。这在所附夹子的末端最为明显。
解决方法
我尝试了您的代码，但无法使用 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 的想法，当您离边缘足够近时，您将偏移重置为屏幕中间，这一切都归结为平铺您的视图，以便它们都出现一个在彼此之上。如果您想对该课程进行任何澄清，请在评论中提问。 当你想通了这 2 个时，然后你粘合 SwiftUIView，它也在提供的类中。现在，在屏幕上看到视图的唯一方法是为 hosts.view 指定一个显式大小，如果您想知道如何将 SwiftUIView 大小设置为 hosts.view，请在评论中告诉我，我正在寻找一个答案。希望代码对某人有帮助，如果有问题请发表评论。
,在查看您的代码后，我相信您所看到的这种跳动是由以下原因引起的：
DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
withAnimation(.easeIn) {
items.insert(items.first! - 1,at: 0)
}
}
如果您将两者都删除并只留下 items.insert(items.first! - 1,at: 0)，那么跳跃将停止。
过去两天我一直在用这个问题把头撞在墙上……像@Ferologics 建议的那样取消 DispatchQueue 几乎可以工作，但是如果你遇到无限自动滚动的潜在问题下拉太用力了。我最终废弃了无限滚动条，并使用下拉刷新 SwiftUIRefresh 从顶部加载新项目。它现在可以完成这项工作，但我仍然很想知道如何实现真正的无限滚动！
import SwiftUI
import SwiftUIRefresh
struct InfiniteChatView: View {
@ObservedObject var viewModel = InfiniteChatViewModel()
var body: some View {
VStack {
Text("Infinite Scroll View Testing...")
Divider()
ScrollViewReader { proxy in
List(viewModel.stagedChats,id: \.id) { chat in
Text(chat.text)
.padding()
.id(chat.id)
.transition(.move(edge: .top))
}
.pullToRefresh(isShowing: $viewModel.chatLoaderShowing,onRefresh: {
withAnimation {
viewModel.insertPriors()
}
viewModel.chatLoaderShowing = false
})
.onAppear {
proxy.scrollTo(viewModel.stagedChats.last!.id,anchor: .bottom)
}
}
}
}
}
和视图模型：
class InfiniteChatViewModel: ObservableObject {
@Published var stagedChats = [Chat]()
@Published var chatLoaderShowing = false
var chatRepo: [Chat]
init() {
self.chatRepo = Array(0...1000).map { Chat($0) }
self.stagedChats = Array(chatRepo[500...520])
}
func insertPriors() {
guard let id = stagedChats.first?.id else {
print("first member of stagedChats does not exist")
return
}
guard let firstIndex = self.chatRepo.firstIndex(where: {$0.id == id}) else {
print(chatRepo.count)
print("ID \(id) not found in chatRepo")
return
}
stagedChats.insert(contentsOf: chatRepo[firstIndex-5...firstIndex-1],at: 0)
}
}
struct Chat: Identifiable {
var id: String = UUID().uuidString
var text: String
init(_ number: Int) {
text = "Chat \(number)"
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
