NavigationStack и TabView в Swiftui iOS 16: ошибка или неправильное использование?

[Xcode 14.1, iOS 16.1] У меня есть NavigationStack с navigationTitle и TabView с двумя представлениями. Каждый вид имеет ScrollView (см. изображение ниже):

Изображение проблемы NavigationStack и TabView

Когда я нажимаю на Tab1 (#1 на изображении выше красным), а затем смахиваю вверх, поведение соответствует ожидаемому (#2), т. е. большой заголовок навигации перемещается в центр, и мое представление проходит ниже и становится размытым. Идеальный. Однако, когда я нажимаю на Tab2 (#3), а затем смахиваю вверх (#4), большой заголовок остается большим, и вид не становится размытым. Затем я снова нажимаю на Tab1 (# 5), и он работает, как и ожидалось.

Пожалуйста помоги!

Вот мой код:

КонтентВью:

import SwiftUI

struct ContentView: View {
   
   @State private var selection: Tab = .tab1
   enum Tab {
      case tab1
      case tab2
   }
   @State private var mainTitle = "Tab1"
   
    var body: some View {
        
       NavigationStack {
          
          TabView(selection: $selection) {
             
             Tab1(mainTitle: $mainTitle)
                 .tabItem {
                     Label("Tab1", systemImage: "wrench.adjustable.fill")
                 }
                 .tag(Tab.tab1)
             
             Tab2(mainTitle: $mainTitle)
                 .tabItem {
                     Label("Tab2", systemImage: "wrench.adjustable.fill")
                 }
                 .tag(Tab.tab2)
             
          } .navigationTitle(mainTitle)
          
       }
       
    }
}

Вкладка 1:

import SwiftUI

struct Tab1: View {
   @Binding var mainTitle : String
   
    var body: some View {
       ScrollView {

          Text("Text tab 1")
             .padding(.all,100)
             .background(.blue)
       } .onAppear {
          mainTitle = "Tab1"
       }
    }
}

Вкладка 2:

import SwiftUI

struct Tab2: View {
   @Binding var mainTitle : String
   
    var body: some View {
       ScrollView {

          Text("Text tab 2")
             .padding(.all,100)
             .background(.green)
       } .onAppear {
          mainTitle = "Tab2"
       }
    }
}

Я попробовал хак, который должен исправить ошибку прозрачности для панелей вкладок, но он не работает.

.onAppear {
let tabBarAppearance = UITabBarAppearance()
                tabBarAppearance.configureWithOpaqueBackground()
                UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}

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

lorem ipsum 23.11.2022 03:44

Спасибо. Я делал это неправильно.

samsamsam 23.11.2022 19:13
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
752
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TabView предназначены для того, чтобы находиться на вершине навигационной иерархии. Они предназначены для того, чтобы пользователи могли переключаться между независимыми разделами вашего приложения в любое время.

Обычно вы размещаете отдельный стек навигации на каждой вкладке, который затем обрабатывает нажатие и выталкивание представлений. Затем вы можете использовать модификатор navigationTitle для управления заголовком экрана.

Таким образом, ваша структура (которая может быть разделена на несколько пользовательских представлений) должна выглядеть примерно так:

TabView {
  NavigationStack {
    ScrollView {
    }
    .navigationTitle("Tab 1")
  }
  .tabItem { Label("Tab1", ...) }
  NavigationStack {
    ScrollView {
    }
    .navigationTitle("Tab 2")
  }
  .tabItem { Label("Tab2", ...) }
}

Эта структура спроектирована так, чтобы соответствовать Руководству Apple по человеческому интерфейсу. Стоит прочитать HIG, чтобы понять, откуда взялась Apple, и как работа по одним и тем же принципам действительно может помочь вашему приложению чувствовать себя так, как будто оно принадлежит устройствам ваших пользователей.

Другие вопросы по теме