提问人:spoax 提问时间:9/18/2020 最后编辑:spoax 更新时间:3/24/2023 访问量:2252
导航视图在 iPad 上的 SwiftUI 中无法正常工作
Navigation View not working properly in SwiftUI on iPad
问:
我正在尝试创建一个适用于 iPhone 和 iPad 的导航视图。目前,我让它在 iPhone 上运行,但是在 iPad 上运行它时,导航视图无法正确显示我的主视图。见下文:
- 这是我加载应用程序的时候
- 如果我按产品(左上角),它会打开产品选项卡。
- 当我点击一个产品时,它会进入这个屏幕
- 如果我单击产品 1(在第 3 张图片上看到),它会将所有详细信息打开到另一个导航栏中。
我试图实现的是图像 4 不在导航选项卡中,而是全屏。我尝试从我的代码中删除 NavigationView,这似乎解决了问题并使其全屏。但是,我随后丢失了导航视图按钮,以允许用户查看其他产品。
这是我的代码的缩短版本(没有所有文本/图像细节):
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)
}
}
}
提前感谢您的帮助:)
编辑:
下面是 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
}
}
}
答:
3赞
Asperi
9/22/2020
#1
正如我所评论的,应该只有一个,所以这里修复了删除的冗余。NavigationView
ProductDetailView
NavigationView
使用 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)
}
}
评论
0赞
spoax
9/22/2020
谢谢 Asperi,这并没有解决我遇到的问题,我还必须删除代码底部的 2 行导航栏。一旦我删除了这些以及 navigationView,它就修复了所有问题。感谢您的帮助。
2赞
spoax
9/22/2020
#2
我弄清楚了问题所在。我删除了 navigationView 和 2 行
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
因为这隐藏了我视图顶部的导航按钮。
10赞
thomas_994
9/9/2021
#3
只需将此行添加为 NavigationView 中的修饰符:
.navigationViewStyle(StackNavigationViewStyle())
评论
0赞
Alwin Jose
11/1/2021
应用这段代码后,一切正常。谢谢,托马斯。
0赞
Maha Mamdouh
10/14/2022
添加此代码行后有效
1赞
Akshay Gandal
3/16/2023
#4
如果您将该属性添加到.navigationViewStyle(StackNavigationViewStyle())
NavigationView.
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)
} .navigationViewStyle(StackNavigationViewStyle())
}
评论
NavigationView
ProductHeaderView