Блог

Я пытаюсь создать вид навигации, который работает как на 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)
    }
  }
}
  

Заранее благодарю вас за вашу помощь 🙂

Редактировать:

Вот код 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

Просто добавьте эту строку в качестве модификатора в свой NavigationView:

 .navigationViewStyle(StackNavigationViewStyle())
  

Как я прокомментировал, должен быть только один 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)
    }
}
  

Я разобрался с проблемой. Я удалил NavigationView, а также 2 строки

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

Поскольку это скрывало кнопки навигации в верхней части моего представления.

Код работает нормально, если вы добавите just add property .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())
    
  }