如何显示来自Firebase的排序地图

时间:2020-10-20 12:18:31

标签: swift firebase google-cloud-firestore swiftui

我正在制作音频流应用程序。我已经列出了一张专辑清单,每张专辑都附有歌曲。我可以按“ order by”功能对这些专辑进行排序,但是我不知道如何对歌曲数组进行排序。在firebase中,我制作了一个名为Album的主集合,在这个集合中,我制作了几个字符串文件,其中一个是名为song的映射,它由另外几个字符串文件组成。我的问题是我无法在swiftui项目中对歌曲进行排序。

这是音频数据代码:

import Foundation
import SwiftUI
import FirebaseFirestore
import Firebase


class OurData: ObservableObject {
    
    @Published public var albums = [Album]()
 
    func loadAlbums() {
        Firestore.firestore().collection("Album").order(by: "songs", descending: true)
        Firestore.firestore().collection("Album").getDocuments { (snapshot, error) in
            if error == nil {
                for document in snapshot!.documents{
                    let name = document.data()["name"] as? String ?? "error"
                    let image = document.data()["image"] as? String ?? "1"
                    let songs = document.data()["songs"] as? [String : [String : Any]]
                    
                    var songsArray = [Song]()
                    if let songs = songs{
                        for song in songs {
                            let songName = song.value["name"] as? String ?? "error"
                            let songTime = song.value["time"] as? String ?? "error"
                            let artistName = song.value["artistName"] as? String ?? "error"
                            let songFile = song.value["file"] as? String ?? "error"
                            
                            songsArray.append(Song(songName: songName, image: image, time: songTime, artist: artistName, file: songFile))
                        }
                    }
                    self.albums.append(Album(albumName: name, image: image, song: songsArray))
                }
            }else{
                print(error!)
            }
        }
    }

以下是音频播放器代码:

import SwiftUI

struct Album : Hashable {
    var ID = UUID()
    var albumName : String
    var image : String
    var song : [Song]
}

struct Song: Hashable {
    var ID = UUID()
    var songName : String
    var image : String
    var time : String
    var artist : String
    var file : String
}


struct PodcastView : View {
    
    @ObservedObject var data: OurData
    
    @State private var currentAlbum : Album?
    
    var body: some View {
            VStack{
                ScrollView (.horizontal, showsIndicators: false, content: {
                    LazyHStack{
                        ForEach(self.data.albums, id: \.self, content: {
                            album in
                            AlbumView(album: album).onTapGesture {
                                self.currentAlbum = album
                            }
                        })
                    
                    }
                    
                })
                ScrollView{
                    LazyVStack{
                        if self.data.albums.first == nil {
                            EmptyView()
                            
                        }else{
                            ForEach((self.currentAlbum?.song ?? self.data.albums.first?.song) ?? [Song(songName: "", image: "", time: "", artist: "", file: "")],
                        id: \.self,
                        content: {
                        song in
                            SongCell(album: currentAlbum ?? self.data.albums.first!, song: song)
                            
                        })
                    }
                }
            }
            .navigationTitle("Podcasty")
            .foregroundColor(.black)
        }
    }
}


struct AlbumView : View{
    
    var album : Album
    
    var body: some View{
        ZStack (alignment: .bottom, content: {
            Image(album.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
            ZStack{
                Blur(style: .extraLight)
                Text(album.albumName)
                    .foregroundColor(.black)
            }.frame(height: 60, alignment: .center)
        }).frame(width: 200, height: 200, alignment: .center)
        .cornerRadius(15.0)
        .shadow(radius: 10)
        .padding(15)
        
    }
}

struct SongCell : View {
    
    @State var showPlayer = false
    
    var album : Album
    var song : Song
    
    var body: some View {
        Button(action: {
            self.showPlayer.toggle()
        }){
            HStack{
                Image(song.image)
                    .resizable()
                    .frame(width: 100, height: 100)
                    .cornerRadius(15)
                    .padding()
                VStack{
                    Text(song.songName)
                        .fontWeight(.semibold)
                        .font(.system(size: 18))
                    Text(song.artist)
                        .font(.system(size: 16))
                }
                Spacer()
                Text(song.time)
                    .padding(.trailing, 10)
                
            }.frame(width: 380, height: 120, alignment: .trailing)
            .background(
                ZStack {
                RoundedRectangle(cornerRadius: 25)
                            .fill(Color.white)
                        .shadow(color: Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)), radius: 5, x: 0, y: 5)
                })
            .padding(10)
        }.sheet(isPresented: $showPlayer, content: {
            PodcastPlayerView(album: album, song: song)
        })
        
    }
}

这是我的Firebase专辑和歌曲数据的屏幕截图的链接:

https://firebasestorage.googleapis.com/v0/b/kosciolfiladelfia-6b832.appspot.com/o/zdj%2FZrzut%20ekranu%20(130).png?alt=media&token=78b51b60-62e9-4935-95f9-18e8a1dc6610

0 个答案:

没有答案