I want to make a View transition while retrieving FireStore data.

Asked 2 years ago, Updated 2 years ago, 106 views

The data is stored in the Firestore with the following data configuration:
I would like to achieve the following transition.
I think it's a transition that's likely to be used a lot, but I don't know how to achieve it. Please let someone know.

[Data Configuration]
Collection("Theme") → document() → Each document contains a Collection("Photo")

実現View transition you want to realize br
View with Theme information → View with Theme Photo

/View with Theme information
import SwiftUI

structure ThemeView:View {
    @ObservedObject varthemeList=ThemeObserver()

    varbody:someView {
        VStack {
            List (themeList.status) {themein
                NavigationLink (destination: PhotoView (theme:self.theme)) {
                ThemeView (oneTheme:theme)
                }
            }
        }
    }
}

// View with User Photo
structurePhotoView:View {
    vartheme —ThemeEntity
    varObservedObject varphotoList=PhotoObserver()
    varbody:someView {
        photoList.pickup (theme:theme)

        Return ScrollView {//ScrollView may appear for some reason after removing it
            VStack {
                ForEach (self.status, id:\.self) {photo in)
                    Text (photo.title) // Example
                }
            }
        }
    }
}

//ObservableObject to get Theme from FireStore
class ThemeObserver:ObservableObject{
    @Published var status= [ThemeEntity]()

        init(){
            let db = Firestore.firestore()
            db.collection("Theme").addSnapshotListener{(snap,error)in
                if error!=nil{
                    print("\(String(describing:error?.localizedDescription))")
                }
                US>for i in snap!.documentChanges {
                        let id = i.document.documentID
                        let themImageURL = i.document.get ("themeImageURL") as ? US>"String?"
                        ...

                        self.status.append(ThemeEntity(id:id,themeImageURL:themeImageURL,...))
                }
            }
        }
    }
}



//ObservableObject to get Photo from FIreStore with func
import Foundation
import FirebaseFirestore
import SwiftUI

classPhotoObserver:ObservableObject{
    @Published var status= [PhotoEntity]()

    func pickup (theme: ThemeEntity) {
        let db = Firestore.firestore()

        db.collection("Theme").document("\(oneTheme.id)").collection("Photo").addSnapshotListener{(snap,error)in
            if error!=nil{
                print("\(String(describing:error?.localizedDescription))")
            }

            vartempStatus: PhotoEntity = [ ]

            US>for i in snap!.documentChanges {
                    let id = i.document.documentID
                    let title=i.document.get("title") as ? US>"String?"
                    ....

                    tempStatus.append (PhotoEntity (id:id, title:title, ...))
            }
            self.status = tempStatus
        }
    }
}

firebase swiftui

2022-09-30 17:12

1 Answers

First of all, as a general premise for using SwiftUI, you should not write "processing" directly in the View definition of body.Call an initializer or method that accepts some action as a closure and write "handling" in that closure, such as photoList.pickup (theme:theme).

If you want to perform the process during the screen transition like this, the onAppear method would be appropriate.

struct PhotoView:View {
    vartheme —ThemeEntity
    @ObservedObject varphotoList=PhotoObserver()

    varbody:someView {
        ScrollView {
            VStack {
                ForEach(self.photoList.status, id:\.self) {photo in)
                    Text (photo.title)
                }
            }
        }.onAppear {
            self.photoList.pickup (theme:self.theme)
        }
    }
}

(In the code you are asking, I think the varObservedObjectvarphotoList=... part of the definition of structurePhotoView is a mistake of @ObservedObjectvarphotoList=...?)

In , I tested the retrieval of data from Firestore by replacing it with a dummy, but unfortunately the initial display did not work.

It seems that ScrollView may not update the screen even if there are some state changes, and the English version of stackoverflow provided some workarounds for similar situations.
SwiftUI ScrollView not getting updated?

All of the workarounds are really "workarounds", but I borrowed only the most votes for ideas and wrote the following code, and now it appears on this dummy base.

struct PhotoView:View {
    vartheme —ThemeEntity
    @ObservedObject varphotoList=PhotoObserver()

    varbody:someView {
        ScrollView (showsIndicators:photoList.status.isEmpty) {
            VStack {
                ForEach(self.photoList.status, id:\.self) {photo in)
                    Text (photo.title)
                }
            }
        }
        .onAppear{
            self.photoList.pickup (theme:self.theme)
        }
    }
}

I can't say for sure if it works in your environment, but please try it.


2022-09-30 17:12

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.