Swiftui iOS 16 中的 NavigationStack 和 TabView：错误或使用不当？

Question

[Xcode 14.1，iOS 16.1] 我有一个带有 navigationTitle 的 NavigationStack 和一个带有 2 个视图的 TabView。每个View都有一个ScrollView（见下图）：

NavigationStack 和 TabView 问题图片

当我点击 Tab1（上图中红色的#1），然后向上滑动时，行为符合预期（#2），即大的 navigationTitle 移动到中心，而我的视图经过下方并变得模糊。完美的。然而，当我点击 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
}

Answer 1

TabView被设计为位于导航层次结构的顶部。它们旨在允许用户随时在应用程序的独立部分之间切换。

您通常会在每个选项卡中放置一个单独的导航堆栈，然后处理视图的推送和弹出。然后，您可以使用navigationTitle修饰符来管理屏幕的标题。

因此，您的结构（可能分为多个自定义视图）应如下所示：

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

此结构是特意设计的，旨在与Apple 的人机界面指南保持一致。值得阅读 HIG，以了解 Apple 的来源，以及遵循相同原则如何真正帮助您的应用程序感觉它属于用户的设备。