SwiftUI中如何将NowPlaying播放条显示在TabView上方

问题原因 #

你的代码存在视图层级错误：你将NowPlayingBar放在了TabView的闭包外部，还错误添加了tabItem修饰符，导致它被渲染为和TabView平级的独立视图，自然显示在整个TabView的最底部。

修复步骤 #

1. 调整根视图层级 #

将TabView和NowPlayingBar放在同一个VStack中，让播放条固定在Tab栏上方，全局可见，修改MyApp代码如下：

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            VStack(spacing: 0) {
                // TabView占满剩余空间
                TabView {
                    VideosView()
                        .tabItem { 
                            Image(systemName: "film")
                            Text("Videos")
                        }
                    AudiosView()
                        .tabItem { 
                            Image(systemName: "headphones")
                            Text("Audios")
                        }
                }
                // 全局正在播放条，固定在Tab栏上方
                NowPlayingBar()
                    .frame(height: 65)
            }
            // 适配全面屏底部安全区，避免播放条下方留白
            .ignoresSafeArea(edges: .bottom)
        }
    }
}

2. 简化NowPlayingBar代码 #

你原本的代码中冗余了ZStack嵌套，且未使用传入的content参数，可直接整合播放条的点击跳转逻辑：

// Blur 结构体保持不变即可
struct Blur: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemChromeMaterial

    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }

    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

struct NowPlayingBar: View {
    @State private var showMediaPlayer = false
    
    var body: some View {
        HStack(spacing: 16) {
            Button(action: {
                showMediaPlayer.toggle()
            }) {
                HStack(spacing: 10) {
                    Image("cover")
                        .resizable()
                        .frame(width: 45, height: 45)
                        .shadow(radius: 6, x: 0, y: 3)
                        .padding(.leading)
                    
                    Text("Shake It Off")
                    
                    Spacer()
                }
            }
            .buttonStyle(PlainButtonStyle())
            
            Button(action: {
                // 播放暂停逻辑
            }) {
                Image(systemName: "play.fill")
                    .font(.title3)
            }
            .buttonStyle(PlainButtonStyle())
            .padding(.horizontal)
            
            Button(action: {
                // 下一曲逻辑
            }) {
                Image(systemName: "forward.fill")
                    .font(.title3)
            }
            .buttonStyle(PlainButtonStyle())
            .padding(.trailing, 30)
        }
        .frame(height: 65)
        .background(Blur())
        .fullScreenCover(isPresented: $showMediaPlayer) {
            // 你的播放详情页实现
        }
    }
}

额外优化 #

如果你的App最低支持iOS 16及以上版本，可以直接使用SwiftUI内置的毛玻璃效果，删除自定义的Blur结构体，将播放条的背景替换为：

.background(.ultraThinMaterial)

内容的提问来源于stack exchange，提问作者swifthing