ios SwiftUI -当视图在套接字数据更改时重新加载时图像 Flink

ru9i0ody  于 2023-05-19  发布在  iOS
关注(0)|答案(1)|浏览(126)

当我从UIKit转移到SwiftUI时,我面临着这个奇怪的问题,每当在SwiftUI中重新加载列表时,我的图像都会 Flink 。
下面是我的SpotView(子视图)的代码

struct SpotView: View, Equatable {
    
    static func == (lhs: SpotView, rhs: SpotView) -> Bool {
        lhs.spotModel == rhs.spotModel
    }

    var spotModel : CoinPairMarketModel
    
    
    var body: some View {
     
        HStack() { 
            ZStack {
                WebImage(url: spotModel.quote_icon_url)
//                    .placeholder(Image("Bitcoin"))
                    .resizable()
                    .interpolation(.none) // disable interpolation
                    .aspectRatio(contentMode: .fit)
                    .background(SwiftUI.Color(uiColor: UIColor.getAppWhite()))
                    .clipShape(Circle())
                    .shadow(color: SwiftUI.Color(UIColor.getAppBlueShadowColor()), radius: 8, x: 0, y: 2)
                    .frame(width: 30, height: 30)
                    .padding(EdgeInsets(top: 0, leading: 15, bottom: -15, trailing: 0))
                    .refreshable {
                        // Perform any necessary actions or reload data here
                    }
                    .id(UUID())

下面是如何从父视图调用它的

struct SpotMarketView: View {
    
    @ObservedObject var viewModel = SpotViewModel()
    
    let socketPublisher = NotificationCenter.default
        .publisher(for: .marketSocketUpdated)
    
    let searchPublisher = NotificationCenter.default.publisher(for: .marketSearchChanged)
  
    var body: some View {

                ScrollView {
                    LazyVStack(spacing:0) {
                        ForEach(viewModel.arrFilterCoinPair ?? [], id: \.self) { element in
                            Button {
                                viewModel.moveToTradeScreen(data: element)
                            } label: {
                                SpotView(spotModel: element, favoriteBtnAction: {
                                    viewModel.addRemoveFavorite(coinPair: element) {
                                    }
                                }).equatable()
                                    .id(UUID())
                            }
                            Rectangle().frame(height: 0.5)
                                .foregroundColor(SwiftUI.Color(UIColor.getAppSeperatorColor()))
                                .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
                            
                        }.id(UUID())
                        
                    }
                }.background(SwiftUI.Color(UIColor.getAppWhite()))

我所理解的是,因为ViewModel是一个ObservedObject,它一次又一次地重新创建视图,这导致图像 Flink 。
Here is the video to understand better
有什么办法解决这个问题吗?
我已经搜索了stackoverflow,但无法找到任何帮助。
谢谢你的支持。

f4t66c6m

f4t66c6m1#

在尝试了多种操作之后,例如从SDWebImage切换到AsyncImage并尝试了所有可能性。最后,我能够通过切换到Kingfisher库来修复它。
翠鸟图书馆有一个.loadDiskFileSynchronously(),有助于停止 Flink 。
这就是我所做的

KFImage(spotModel.quote_icon_url)
                .loadDiskFileSynchronously()
                .cacheMemoryOnly()
                .fade(duration: 0.25)
                .resizable()
                .interpolation(.none) // disable interpolation
                .aspectRatio(contentMode: .fit)
                .background(SwiftUI.Color(uiColor: UIColor.getAppWhite()))
                .clipShape(Circle())
                .shadow(color: SwiftUI.Color(UIColor.getAppBlueShadowColor()), radius: 8, x: 0, y: 2)
                .frame(width: 30, height: 30)
                .padding(EdgeInsets(top: 0, leading: 15, bottom: -15, trailing: 0))
                .refreshable {
                    // Perform any necessary actions or reload data here
                }
                .id(UUID())

相关问题