Question

我想从子视图显示底部工作表或模式视图，但应该覆盖在整个应用程序的顶部，即使有选项卡或导航栏。例如：

struct ContentView: View {
    @State private var selected = 0

    var body: some View {
        TabView(selection: $selected) {
            Content1View()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
                .tag(0)
        }
    }
}

struct Content1View: View {
    var body: some View {
        Text("Content 1")
            .overlay(
                Color.blue
                    .opacity(0.1)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .ignoresSafeArea()
            )
    }
}

如何在不让标签栏做到这一点的情况下，在整个应用程序顶部制作蓝色叠加层？

Answer 1

对于底部工作表，即使使用标签或导航栏，.sheet modifier 实际上也能做到这一点：

struct Content1View: View {
    @State var showSheet = false
    
    var body: some View {
        Button(action: { showSheet = true}) {
            Text("Content 1")
        }
        .sheet(isPresented: $showSheet) {
            Color.blue
                .opacity(0.1)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea()
        }
    }
}

.fullScreenCover 的工作方式相同，但覆盖整个屏幕：

struct Content1View: View {
    @State var showSheet = false
    
    var body: some View {
        Button(action: { showSheet = true}) {
            Text("Content 1")
        }
        .fullScreenCover(isPresented: $showSheet) {
            Color.blue
                .opacity(0.1)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea()
        }
    }
}

从孩子的根视图顶部覆盖视图？

1 个答案: