如何用SwiftUI实现类似Apple Music的跨TabView固定播放栏？

我想要用SwiftUI实现类似Apple Music的效果：一个在所有标签页都可见的播放栏，请问SwiftUI能做到吗？

Apple Music的播放栏效果：

我试过用overlay方法：

TabView {
    NavigationStack(path: $coordinator.path) {
        ContentView()
            .navigationDestination(for: Destination.self) { destination in
                ViewFactory.viewForDestination(destination)
            }
    }
    .tabItem {
        Text("Home")
    }
    DownloadsView()
        .tabItem {
            Text("Downloads")
        }
}
.overlay(alignment: .bottom) {
    MediaControlBar()
}

但播放栏会和TabView的标签栏重叠，而且不会自动调整上方视图的内容，导致底部内容被遮挡。

后来我尝试自定义实现，离目标更近了，但无法切换视图：

struct MyTabView: View {
    var items: [MyTabItem]
    @State var selectedItem: MyTabItem
    var body: some View {
        VStack {
            selectedItem.view
            MediaControlBar()
            Picker("tabs", selection: $selectedItem) {
                ForEach(items) { item in
                    Text(item.title)
                }
            }
            .pickerStyle(.segmented)
        }
    }
    struct MyTabItem: Hashable, Equatable, Identifiable {
        static func == (lhs: MyTabView.MyTabItem, rhs: MyTabView.MyTabItem) -> Bool {
            lhs.id == rhs.id
        }
        func hash(into hasher: inout Hasher) {
            hasher.combine(id)
        }
        let id = UUID()
        let view: AnyView
        let title: String
    }
}

方案1：用safeAreaInset替代overlay（推荐） #

safeAreaInset是SwiftUI专门用来添加固定在安全区边缘的视图的API，它会自动调整上方内容的布局，避免重叠问题：

TabView {
    NavigationStack(path: $coordinator.path) {
        ContentView()
            .navigationDestination(for: Destination.self) { destination in
                ViewFactory.viewForDestination(destination)
            }
    }
    .tabItem {
        Text("Home")
    }
    DownloadsView()
        .tabItem {
            Text("Downloads")
        }
}
.safeAreaInset(edge: .bottom, alignment: .center, spacing: 0) {
    MediaControlBar()
        .background(Color(.systemBackground)) // 可选：添加背景覆盖标签栏
}

这个方法不需要手动给每个页面加内边距，系统会自动把TabView的内容向上偏移，适配播放栏的高度，同时播放栏会固定在底部，不会和标签栏重叠。

方案2：修复自定义TabView的切换问题 #

你自定义的MyTabView无法切换视图，是因为直接绑定MyTabItem实例会导致Picker无法正确识别选中状态。可以改用索引绑定的方式修复：

struct MyTabView: View {
    let items: [MyTabItem]
    @State private var selectedIndex = 0 // 用索引替代实例绑定
    
    var body: some View {
        VStack(spacing: 0) {
            // 让选中的视图占满剩余空间
            items[selectedIndex].view
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            MediaControlBar()
            
            Picker("tabs", selection: $selectedIndex) {
                ForEach(items.indices, id: \.self) { index in
                    Text(items[index].title)
                        .tag(index) // 绑定索引值
                }
            }
            .pickerStyle(.segmented)
            .padding(.horizontal, 16)
            .padding(.bottom, 8)
        }
    }
    
    struct MyTabItem: Identifiable {
        let id = UUID()
        let view: AnyView
        let title: String
        
        // 简化初始化方法
        init<V: View>(title: String, view: V) {
            self.title = title
            self.view = AnyView(view)
        }
    }
}

使用示例：

MyTabView(items: [
    MyTabItem(title: "Home", view: NavigationStack {
        ContentView()
    }),
    MyTabItem(title: "Downloads", view: DownloadsView())
])

修改后，Picker通过索引值来切换选中的视图，就能正常触发页面切换了。

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