xcode 在SwiftUI中的选项卡视图下方以模态方式显示视图

xj3cbfub  于 2023-02-25  发布在  Swift
关注(0)|答案(1)|浏览(104)

我正在尝试在SwiftUI中构建一个应用程序。我需要在点击中心选项卡中的按钮时呈现全屏视图,并在第二次单击时消除相同的视图。所需的视图应该在选项卡视图上方。
我的内容视图是:

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)
    }
}

}
我的自定义选项卡视图是:

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()
        })

这是在标签视图上提供底部工作表

我需要一张底片

lp0sw83n

lp0sw83n1#

你可以使用ZStack来实现这个目的,你可以在TabBar的下面添加一个覆盖层,并在覆盖层上添加一个过渡,使它看起来像一个模态。
大概是这样的

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

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

                // TabBar
                Rectangle()
                    .frame(height: tabBarHeight)
                    .overlay {
                        Button(isShowingOverlay ? "Hide overlay" : "Show overlay") {
                            withAnimation {
                                isShowingOverlay.toggle()
                            }
                        }
                    }
            }
        }
        .frame(maxHeight: .infinity, alignment: .bottom)
        .ignoresSafeArea()
    }
}

相关问题