gpt4 book ai didi

SwiftUI:NavigationBar 和 TabBar 的全屏 View

转载 作者:行者123 更新时间:2023-12-05 01:08:03 24 4
gpt4 key购买 nike

我正在尝试在 SwiftUI 中为我的应用添加全屏 View 。这样做的目的是要有一个淡入的“阴影”,这将使屏幕变暗并将焦点集中在自定义弹出窗口上,从而禁用背景中的内容。请参阅下面的视觉示例:

What I've got What I want

我试图添加此阴影的 View 嵌入在一个复杂的 NavigationView 堆栈中(有几层深,通过 NavigationLink 访问),并且还有一个可见的 TabBar。到目前为止,我已经尝试将 NavigationView 嵌入 ZStack 并在顶部添加 Rectangle() 但无济于事,NavigationBar 和 TabBar仍然坐在这个 View 之上。我也尝试过使用 .zIndex() 修饰符,但这似乎什么也没做。

非常感谢任何帮助,

谢谢

最佳答案

您不需要处理 zIndex,因为您覆盖了整个屏幕!即使您不需要禁用当前 View 以使用 PopUp,因为 PopUp 再次位于顶层。 zIndex 在您没有覆盖屏幕时会有所帮助,这是一种方法:

struct ContentView: View {

@State private var isPresented: Bool = Bool()

var body: some View {

NavigationView {

VStack {

Button("Show Custom PopUp View") { isPresented.toggle() }

}
.navigationTitle("Navigation Title")

}
.customPopupView(isPresented: $isPresented, popupView: { popupView })

}

var popupView: some View {

RoundedRectangle(cornerRadius: 20.0)
.fill(Color.white)
.frame(width: 300.0, height: 200.0)
.overlay(

Image(systemName: "xmark").resizable().frame(width: 10.0, height: 10.0)
.foregroundColor(Color.black)
.padding(5.0)
.background(Color.red)
.clipShape(Circle())
.padding()
.onTapGesture { isPresented.toggle() }

, alignment: .topLeading)

.overlay(Text("Custom PopUp View!"))
.transition(AnyTransition.scale)
.shadow(radius: 10.0)

}
}


struct CustomPopupView<Content, PopupView>: View where Content: View, PopupView: View {

@Binding var isPresented: Bool
@ViewBuilder let content: () -> Content
@ViewBuilder let popupView: () -> PopupView
let backgroundColor: Color
let animation: Animation?

var body: some View {

content()
.animation(nil, value: isPresented)
.overlay(isPresented ? backgroundColor.ignoresSafeArea() : nil)
.overlay(isPresented ? popupView() : nil)
.animation(animation, value: isPresented)

}
}

extension View {
func customPopupView<PopupView>(isPresented: Binding<Bool>, popupView: @escaping () -> PopupView, backgroundColor: Color = .black.opacity(0.7), animation: Animation? = .default) -> some View where PopupView: View {
return CustomPopupView(isPresented: isPresented, content: { self }, popupView: popupView, backgroundColor: backgroundColor, animation: animation)
}
}

enter image description here

关于SwiftUI:NavigationBar 和 TabBar 的全屏 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66547657/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com