SwiftUI中导航视图在iPad上无法正常工作

Question

我正在尝试创建一个适用于iPhone和iPad的导航视图。目前，我已经在iPhone上实现了它，但是在iPad上运行时，导航视图无法正确呈现我的主视图。请参见下面的内容：

1. 这是我加载应用程序时的情况
2. 如果我按产品（左上角），它会打开产品选项卡。
3. 当我单击产品时，它会进入此屏幕
4. 如果我单击产品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)
    }
  }
}

Thank you in advance for your help :)

EDIT:

以下是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
        }
    }
}

示例项目：https://github.com/spoax94/productsMinimal.git

- spoax

---

看起来你在 ProductHeaderView 中有另一个 NavigationView，但是在单个视图层次结构中只能使用一个。 - Asperi

嗨，我已经更新了我的帖子，并添加了我的ProductHeaderView，我在其中没有使用NavigationView。 - spoax

你能准备一个最小可复现的示例吗？ - Asperi

Answer 1

只需在 NavigationView 中添加此行作为修饰符：

.navigationViewStyle(StackNavigationViewStyle())

- thomas_994

---

应用这段代码后一切正常。谢谢，Thomas。 - Alwin Jose

添加了这行代码后可以正常工作。 - Maha Mamdouh

Answer 2

正如我在评论中提到的，应该只有一个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)
    }
}

- Asperi

---

谢谢Asperi，但这并没有解决我的问题，我还必须删除代码底部的2个navigationBar行。一旦我删除了那些以及navigationBar，就一切都解决了。感谢您的帮助。 - spoax

Answer 3

我找到了问题所在。我移除了navigationView以及两行代码。

.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)

由于这个问题，我无法看到视图顶部的导航按钮。

- spoax

Answer 4

如果您只是在NavigationView中添加属性.navigationViewStyle(StackNavigationViewStyle())，那么代码就可以正常工作。

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

- Akshay Gandal