Show BottomPlayerView above TabView in SwiftUI

Question

I'm learning swiftUI and I want to make a music app.

I created a view which going to be above the tabView, but I want it to be shown only if user start playing a music.

My App, I use ZStack for bottomPlayer, and I share the bottomPlayer variable through .environmentObject(bottomPlayer) so the child views can use it:

class BottomPlayer: ObservableObject {
    var show: Bool = false
}

@main
struct MyCurrentApp: App {
    var bottomPlayer: BottomPlayer = BottomPlayer()
    var audioPlayer = AudioPlayer()

    var body: some Scene {
        WindowGroup {
            ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
                TabBar()
                if bottomPlayer.show {
                    BottomPlayerView()
                        .offset(y: -40)
                }
            }
            .environmentObject(bottomPlayer)
        }
    }
}

The BottomPlayerView (above the TabView)

struct BottomPlayerView: View {
        var body: some View {
            HStack {
                Image("cover")
                    .resizable()
                    .frame(width: 50, height: 50)
                VStack(alignment: .leading) {
                    Text("Artist")
                        .foregroundColor(.orange)
                    Text("Song title")
                        .fontWeight(.bold)
                }
                Spacer()
                Button {
                    print("button")
                } label: {
                    Image(systemName: "play")
                }
                .frame(width: 60, height: 60)
            }
            .frame(maxWidth: .infinity, maxHeight: 60)
            .background(Color.white)
            .onTapGesture {
                print("ontap")
            }
        }
    }

My TabView:

struct TabBar: View {
    var body: some View {
        TabView {
            AudiosTabBarView()
            VideosTabBarView()
            SearchTabBarView()
        }
    }
}

And In my SongsView, I use the EnvironmentObject to switch on the bottomPlayerView

struct SongsView: View {

    @EnvironmentObject var bottomPlayer: BottomPlayer

    var body: some View {
        NavigationView {
            VStack {
                Button {
                    bottomPlayer.show = true
                } label: {
                    Text("Show Player")
                }
            }
            .listStyle(.plain)
            .navigationBarTitle("Audios")
        }
    }
}

The problem is the bottomPlayer.show is actually set to true, but doesn't appear ... Where I am wrong?

Answer 1

In your BottomPlayer add the @Published attribute before the show boolean. This creates a publisher of this type. apple documentation