首页 > 解决方案 > UIViewRepresentable 中的 UICollectionView 不会从 onAppear 滚动到项目

问题描述

我有一个类,它设置为在成员变量 UICollectionView 中触发运动功能:

class CollectionFunctionStore : ObservableObject {
    //class to hold data about a UICollection and from where some functions can be triggered
    var collectionRef : UICollectionView?

    func jumpGrid(){
        if let lclCollection = collectionRef {
        let ip = IndexPath(row: 15, section: 0)
        lclCollection.scrollToItem(at: ip, at: .bottom, animated: false)
        lclCollection.reloadData()
        print("jumpGrid() was reached: ")
        }
    }
}

那里的单个函数“jumpGrid”会将网格反弹到第 15 行,该类在 swiftUI 应用程序中使用,并且相关集合包含在 UIViewRepresentable 中。函数存储和包含 UICollectionView 的 UIViewRepresentable 都在一个结构中,以及顶层内容视图中的一个按钮

import SwiftUI

struct ContentView: View {
    @ObservedObject var swiperStore = CollectionFunctionStore()
    var body: some View {
       return ZStack {
        VStack{
            CollectionAndStoreContainer(swiperStore: swiperStore)
            JumpButton(swiperStore: swiperStore)
        }.onAppear(perform:  swiperStore.jumpGrid)
       }
    }
}

struct CollectionAndStoreContainer : View {
    @ObservedObject var swiperStore : CollectionFunctionStore
    var body: some View{
        return ZStack{
            CollectionViewRepresentable(swiperStoreParam: swiperStore).frame(width: 30, height: 200)
        }
    }
}

struct JumpButton : View {
    @ObservedObject var swiperStore : CollectionFunctionStore
    var body : some View{
        return Button(action: {
            swiperStore.jumpGrid()
        }){
            ZStack {
                Rectangle().frame(width: 60, height: 30).foregroundColor(.orange).cornerRadius(4)
                Text("j").foregroundColor(.white)
            }
        }
    }
}

我面临的问题是:包含与顶级视图相同的功能存储的按钮可以毫无问题地触发滚动到项目功能,而 onAppear 事件可以调用该功能,它实际上会打印其代码中包含的消息但它不会移动集合的内容... Button 调用该函数并且 UICollectionView 正确响应 onAppear 调用该函数但 UICollectionView 不移动。

=====一些额外的信息===== 在这种情况下我没有选择使用 UIViewRepresentable,我不能使用lazyHgrid 或 HStacks 这里也是有问题的 UIViewRepresentable 的代码

struct CollectionViewRepresentable : UIViewRepresentable {
    
    var swiperStore : CollectionFunctionStore
    
    typealias UIViewType = UICollectionView
    
    init(swiperStoreParam : CollectionFunctionStore) {
        swiperStore = swiperStoreParam
    }
    
    func makeUIView(context: Context) -> UICollectionView {
        
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: 30, height: 30)
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.minimumLineSpacing = 0
       
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.dataSource = context.coordinator
        collectionView.delegate = context.coordinator
        collectionView.register(ExtendedCell.self, forCellWithReuseIdentifier: "ExtCell")
        collectionView.isScrollEnabled = true
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.showsVerticalScrollIndicator = false
        swiperStore.collectionRef = collectionView
        return collectionView
    }
    
    func makeCoordinator() -> Coordinator {
            return Coordinator()
    }
    
    func updateUIView(_ uiView: UICollectionView, context: Context) {
         
    }
}

有人有什么想法吗?总体目标是让 UICollectionView 在其外观一开始就滚动到特定位置,所以我认为在 SwiftUI 中使用 onAppear 是最好的方法,但由于某种原因它没有移动网格,甚至有例如,协调器中的更好选择?任何帮助表示赞赏..

标签: uicollectionviewswiftui

解决方案


我认为在onAppear中调用scroll-to还为时过早,因为此时collection view还没有完成构建。

尝试

}.onAppear {
 DispatchQueue.main.async { swiperStore.jumpGrid() }
}

甚至

}.onAppear {
 // with some delay, if appeared constructed with animation or async, etc.
 DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {  // 0.25-0.5 sec
    swiperStore.jumpGrid() 
 }
}

推荐阅读