[英]Navigation View not working properly in SwiftUI on iPad
I am trying to create an navigation view that works on both iPhone and iPad.我正在尝试创建一个适用于 iPhone 和 iPad 的导航视图。 Currently I have it working on the iPhone however when running it on the iPad the navigation view doesnt present my main view properly.目前我在 iPhone 上运行它,但是在 iPad 上运行它时,导航视图不能正确显示我的主视图。 See below:见下文:
What I am trying to achieve is that image 4 isn't in a navigation tab and instead it is the full screen.我想要实现的是图像 4 不在导航选项卡中,而是全屏显示。 I tried removing NavigationView from my code which seems to fix the problem and makes it full screen.我尝试从我的代码中删除 NavigationView,这似乎解决了问题并使其全屏显示。 However, I then lose the navigation view buttons to allow the user to view other products.但是,我随后丢失了导航视图按钮以允许用户查看其他产品。
Here is a shortened version my code (without all the text/image details):这是我的代码的缩短版本(没有所有文本/图像详细信息):
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center, spacing: 20) {
ProductHeaderView(product: product)
VStack(alignment: .leading, spacing: 15) {
Text(product.title)
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(product.gradientColors[1])
Text(product.headline)
.font(.headline)
.multilineTextAlignment(.leading)
}
.padding(.horizontal, 20)
.frame(maxWidth: 640, alignment: .center)
}
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
}
.edgesIgnoringSafeArea(.top)
}
}
}
Thank you in advance for your help :)预先感谢您的帮助 :)
EDIT:编辑:
Here is the ProductHeaderView.swift code:这是 ProductHeaderView.swift 代码:
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: product.gradientColors), startPoint: .topLeading, endPoint: .bottomTrailing)
TabView{
ForEach(0..<product.images.count, id: \.self) { item in
Image(product.images[item])
.resizable()
.scaledToFit()
.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.15), radius: 8, x: 6, y: 8)
.scaleEffect(isAnimatingImage ? 1.0 : 0.6)
}//: FOR LOOP
}//: TAB VIEW
.tabViewStyle(PageTabViewStyle())
.padding(.vertical, 0)
} //: ZSTACK
.frame(height: 414)
.onAppear(){
withAnimation(.easeOut(duration: 0.5)){
isAnimatingImage = true
}
}
}
Example project: https://github.com/spoax94/productsMinimal.git示例项目: https : //github.com/spoax94/productsMinimal.git
As I commented there should be only one NavigationView
, so here fixed ProductDetailView
with removed redundant NavigationView
.正如我评论的那样,应该只有一个NavigationView
,所以这里修复了ProductDetailView
并删除了多余的NavigationView
。
Tested with Xcode 12使用 Xcode 12 测试
struct ProductDetailView: View {
var product: Product
var products: [Product] = productData
@State var showingPreview = false
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center, spacing: 20) {
ProductHeaderView(product: product)
VStack(alignment: .leading, spacing: 15) {
Text(product.title)
.font(.largeTitle)
.fontWeight(.heavy)
Text(product.headline)
.font(.headline)
.multilineTextAlignment(.leading)
Text("Learn More About \(product.title)".uppercased())
.fontWeight(.bold)
.padding(0)
Text(product.description)
.multilineTextAlignment(.leading)
.padding(.bottom, 10)
}
.padding(.horizontal, 20)
.frame(maxWidth: 640, alignment: .center)
}
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
}
.edgesIgnoringSafeArea(.top)
}
}
只需在您的 NavigationView 中添加这一行作为修饰符:
.navigationViewStyle(StackNavigationViewStyle())
I figured out the problem.我解决了这个问题。 I removed the navigationView and also the 2 lines我删除了navigationView和 2 行
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
As this was hiding the navigation buttons at the top of my view.因为这隐藏了我视图顶部的导航按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.