SwiftUI4.0：如何在TabView的TabItem内展示不遮挡标签的Sheet

要实现仅覆盖当前Tab子视图、不遮挡底部标签栏的Sheet效果，核心是将Sheet修饰符附加到对应TabItem的子视图内部，而非TabView本身。结合SwiftUI 4的presentationDetents()可以轻松实现类似苹果官方应用的效果。

示例代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            // 第一个Tab：普通页面
            Text("首页")
                .tabItem {
                    Image(systemName: "house")
                    Text("首页")
                }
            
            // 第二个Tab：包含Sheet的页面
            SheetHostView()
                .tabItem {
                    Image(systemName: "square.and.pencil")
                    Text("编辑")
                }
        }
    }
}

// 承载Sheet的子视图
struct SheetHostView: View {
    @State private var showSheet = false
    
    var body: some View {
        VStack {
            Button("弹出Sheet") {
                showSheet.toggle()
            }
            .font(.title)
            
            Spacer()
        }
        .padding()
        // 将Sheet附加在当前子视图上
        .sheet(isPresented: $showSheet) {
            // 自定义Sheet内容
            VStack {
                Text("仅覆盖当前Tab内容")
                    .font(.headline)
                Spacer()
            }
            .padding()
            // 设置Sheet的弹出高度
            .presentationDetents([.medium, .large])
            // 可选：设置Sheet的圆角，贴近官方风格
            .presentationCornerRadius(16)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键说明 #

• Sheet作用域控制：把sheet()修饰符放在Tab对应的子视图（如SheetHostView）内部，而非TabView上，这样Sheet的展示上下文是该子视图，只会覆盖当前Tab的内容区域，底部标签栏会保持可见。
• 利用presentationDetents：通过.presentationDetents([.medium, .large])可以设置Sheet的弹出高度，.medium对应屏幕一半左右的高度，刚好不会遮挡底部标签栏。
• 自定义样式：可以搭配.presentationCornerRadius()、.presentationBackground()等修饰符，进一步贴近苹果官方应用的Sheet样式。

内容的提问来源于stack exchange，提问作者Y.H.