I am trying to create an navigation view that works on both iPhone and 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. See below:
- This is when I load the app
- If I press products (top left) it opens up the products tab.
- When I click on a product it goes to this screen
- If I click Product 1 (seen on 3rd image) It opens all the details into another navigation bar.
What I am trying to achieve is that image 4 isn't in a navigation tab and instead it is the full screen. I tried removing NavigationView from my code which seems to fix the problem and makes it full screen. 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:
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
from Navigation View not working properly in SwiftUI on iPad
No comments:
Post a Comment