在 SwiftUI 中的选项卡视图下方以模态方式呈现视图答案

【问题标题】：Present a View Modally below the tabview in SwiftUI在 SwiftUI 中的选项卡视图下方以模态方式呈现视图
【发布时间】：2023-02-22 22:19:41
【问题描述】：

我正在尝试在 SwiftUI 中构建一个应用程序。我需要在点击中心选项卡中的按钮时显示全屏视图，并在第二次点击时关闭该按钮。需要的view应该在tabview上面。

我的内容视图是：

struct ContentView: View {
@State var index = 0
@State private var isPresented = false

var body: some View {
    VStack(spacing: 0) {
        ZStack {
            Color.clear
            switch self.index {
            case 0:
                Home()
            case 1:
                Info()
            case 2:
                Services()
            case 3:
                Support()
            case 4:
                Notifications()
            default:
                Home()
            }
        }
        CustomTabs(index: $index)
    }
}

}

我的自定义 TabView 是：

struct CustomTabs: View {
@Binding var index: Int
@State private var showServiceView = false
@State var rotation = 0.0
@State private var isPresented = false

var body: some View {
    HStack {
        //Home
            VStack {
                Image("home")
                Text("Home").font(.system(size: 12))
            }
            .padding(.leading, 20)
            .frame(width: 55, height: 90)
        
        Spacer(minLength: 0)
        
        //Information
        VStack {
                Image("info")
                Text("Information").font(.system(size: 12))
            }
                         
        Spacer(minLength: 0)
        
        //Services
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: 45)
                        .fill(Color.clear)
                        .frame(width: 90, height: 80)
                    Image(self.isPresented ? "closeTab" : "bottombutton")
                }
                Text("Services").font(.system(size: 12))
            }
            .offset(y: -30)
            .onTapGesture {
                self.index = 2
                self.isPresented.toggle()
            }
        
        Spacer(minLength: 0)
        
        //Support
        VStack {
                Image("support")
                Text("Support").font(.system(size: 12))
            }
        
        Spacer(minLength: 0)
        
        // Notifications
        VStack {
                Image(self.index == 4 ? "alertsSelected" : "tab_alert")
                Text("Alerts").font(.system(size: 12))
            }
    }
    .frame( height: 70)
    .background(Color.white)
}

}

我尝试使用

.sheet(isPresented: $isPresented, content: {
                //View2()
            })

和

        .fullScreenCover(isPresented: $isPresented, content: {
            //View2()
        })

这是在 tabview 上给出底页

我需要像这样的底片

【问题讨论】：

标签： ios xcode swiftui

【解决方案1】：

为此，您可以使用 ZStack 并向其添加过渡。

像这样：

struct ContentView: View {
    @State private var isShowingOverlay = false
    private let tabBarHeight: CGFloat = 100

    var body: some View {
        VStack {
            ZStack(alignment: .bottom) {
                if isShowingOverlay {
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(height: 400)
                        .padding(.bottom, tabBarHeight)
                        .transition(
                            AnyTransition.move(
                                edge: isShowingOverlay ? .bottom : .top
                            )
                        )
                }

                Rectangle()
                    .frame(height: tabBarHeight)
                    .overlay {
                        Button(isShowingOverlay ? "Hide overlay" : "Show overlay") {
                            withAnimation {
                                isShowingOverlay.toggle()
                            }

                        }
                    }
            }
        }
        .frame(maxHeight: .infinity, alignment: .bottom)
        .ignoresSafeArea()
    }
}

【讨论】：