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

Navigation View not working properly in SwiftUI on iPad

提问人:spoax 提问时间:9/18/2020 最后编辑:spoax 更新时间:3/24/2023 访问量:2252

问:

我正在尝试创建一个适用于 iPhone 和 iPad 的导航视图。目前,我让它在 iPhone 上运行,但是在 iPad 上运行它时,导航视图无法正确显示我的主视图。见下文:

enter image description here

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

提前感谢您的帮助:)

编辑:

下面是 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

iOS Swift Xcode SwiftUI

评论

1赞 Asperi 9/18/2020
看起来你里面有另一个,但你只需要在单个视图层次结构中使用一个。NavigationViewProductHeaderView
0赞 spoax 9/18/2020
嗨,我已经用我的 ProductHeaderView 更新了我的帖子,我没有在那里使用 NavigationView。
0赞 Asperi 9/18/2020
你会准备最小的可重复的例子吗?

答:

3赞 Asperi 9/22/2020 #1

正如我所评论的,应该只有一个,所以这里修复了删除的冗余。NavigationViewProductDetailViewNavigationView

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