SwiftUI - 从另一个视图导航时，如何为 TabView 中的每个 tabItem 设置单独的自定义工具栏/TopBar？

Question

场景：

我有一个带有“输入按钮”的登录屏幕，如下图所示：

。最简单的代码是：

NavigationStack{
        // Contains BG and rest of elements
        ZStack{
            Image("LoginBG")
            .resizable()
            .ignoresSafeArea(.all)
            
        VStack {
                Image("")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 150, height: 150)
                    .padding()
 
             NavigationLink(destination: RootTabView().navigationBarBackButtonHidden(true)){
                 
                 Text("Enter")
                 .frame(maxWidth: 200)
                 .bold()
                 
             }
             .buttonStyle(.borderedProminent)
             .tint(Color(red: 6/100, green: 36/100, blue: 42/100))
     
        } // Vstack
        } // ZStack
}

单击 Enter 后，它会将我带到 TabView，其中包含一些项目。代码如下：

TabView {
        
        Profile()
        .tabItem {Label("Profile", systemImage: "person.crop.circle")}
        
        MyEvents()
        .tabItem {Label("My Events", systemImage: "house")}
        
        SearchEvents()
        .tabItem {Label("Search", systemImage: "magnifyingglass")}
        
        Rating()
        .tabItem {Label("Rating", systemImage: "bell")}
        
        Settings()
        .tabItem {Label("Settings", systemImage: "gear")}
        
    }

TabView 包含例如 Profile 视图。这个视图看起来像这样：

，代码如下：

NavigationStack{
    VStack {
        Image("ProfileBG")
        .resizable()
        .clipShape(Circle())
        .ignoresSafeArea(.all)
        .frame(maxWidth: 100,maxHeight: 100)
        .padding()
        .padding()
        .navigationTitle("Profile")
        
        Text("User").bold()
        Text("@AppUser")
        
        HStack{
            VStack {
                Text("Events Created").bold()
                Text("0")
            }
            
            Spacer()
            
            
            VStack {
                Text("Events Joined").bold()
                Text("0")
            }
            
            
        }
        .padding()
        .frame(width: 330)
    }
    }

问题：

当我从登录视图导航到 TabView 时，Profile TabView 项目显示如下：

。

如您所见，当我从登录屏幕导航到 TabView 时，工具栏（或 UIKit 中的 UINavigationBar）没有出现。

目标：

我想要一个自定义的工具栏，每个工具栏都有不同的背景颜色和标题

tabItem

我尝试了所有可能的方法来设置工具栏，但是当

navigationBarTitleDisplayMode

设置为

.large

时，我无法更改工具栏标题。而且 

.inline

 不是我的首选。

我尝试在谷歌、堆栈溢出中寻找答案，但这并不常见。 有人可以帮助我吗？

提前致谢。

Answer 1

您的简历，因为一旦招聘经理阅读了您的简历，他们就会阅读您的求职信以获取有关您的更多信息。进入2024年，就业市场的竞争变得更加激烈；因此，您需要确保在申请工作时尽最大努力。如果您想了解撰写求职信的 5 个步骤，请继续阅读。

引人注目的第一段 研究表明，您大约有七秒钟的时间来引起招聘经理的注意。因此，求职信的第一段是最重要的。通过说一些独特的话，而不仅仅是他们习惯听到的常见言辞，您将大大增加获得工作面试的机会。

Answer 2

首先，从

NavigationStack

中删除

Profile

，因为父视图已经有了NavigationStack。从配置文件中删除导航标题并动态设置 RootTabView 的导航标题，如下所示：

struct RootTabView: View {
    @State private var navigationTitle: String = "Profile"
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            Profile()
                .tabItem { Label("Profile", systemImage: "person.crop.circle") }
                .tag(0)

            MyEvents()
                .tabItem { Label("My Events", systemImage: "house") }
                .tag(1)

            SearchEvents()
                .tabItem { Label("Search", systemImage: "magnifyingglass") }
                .tag(2)

            Rating()
                .tabItem { Label("Rating", systemImage: "bell") }
                .tag(3)

            Settings()
                .tabItem { Label("Settings", systemImage: "gear") }
                .tag(4)
        }
        .onChange(of: selectedTab) {
            print(selectedTab)
            switch selectedTab {
                case 0:
                    navigationTitle = "Profile"
                case 1:
                    navigationTitle = "My Events"
                case 2:
                    navigationTitle = "Search Events"
                case 3:
                    navigationTitle = "Rating"
                case 4:
                    navigationTitle = "Settings"
                default:
                    break
            }
        }
        .navigationTitle(navigationTitle)
    }
}

通过将以下代码添加到您的 SwiftUI 应用程序来更改导航栏外观：

@main
struct StackOverflowAnsApp: App {
    init() {
        let appearence = UINavigationBarAppearance()
        let attributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 24)
        ]
        appearence.titleTextAttributes = attributes
        appearence.largeTitleTextAttributes = attributes
        appearence.backgroundColor = .secondarySystemBackground

        UINavigationBar.appearance().standardAppearance = appearence
        UINavigationBar.appearance().compactAppearance = appearence
        UINavigationBar.appearance().scrollEdgeAppearance = appearence
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

输出：