TabView 中的 SwiftUI 导航标题

Question

出于本问题答案中概述的原因SwiftUI TabView亮度视图垂直位置我的应用程序的菜单结构是

NavigationView

->

TabView

->具有不同导航标题的子视图。

问题在于

.navigationTitle

为整个 TabView 提供一个导航标题，而不是为每个子视图提供一个导航标题。如何使用

TabView

拥有多个导航标题，每个子视图一个？

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                Text("Hello")
                    .navigationTitle("Title One")
                    .tabItem {
                        Image(systemName: "square.stack")
                }
                Text("Hello Again")
                    .navigationTitle("Title Two")
                    .tabItem {
                        Image(systemName: "checkmark.square")
                }
            }
        }
    }
}

Answer 1

我们可以根据选项卡选择来定义标题。下面是一个简单的方法演示。使用 Xcode 13 / iOS 15 进行测试

struct ContentView: View {
    @State var selection = 1

    var body: some View {
        NavigationView {
            TabView(selection: $selection) {
                Text("Hello")
                    .tabItem {
                        Image(systemName: "square.stack")
                }.tag(1)
                Text("Hello Again")
                    .tabItem {
                        Image(systemName: "checkmark.square")
                }.tag(2)
            }
            .navigationTitle(selection == 1 ? "First" : "Second") // << here !!
        }
    }
}

Answer 2

请参阅此处有关带有选项卡的 TabView 的较新文档：

[https://developer.apple.com/documentation/swiftui/enhancing-your-app-content-with-tab-navigation]

struct ProfileTabView: View {
    @EnvironmentObject private var authViewModel: AuthenticationViewModel
    @State private var selectedTab: Tabs = .myProfile
    
    enum Tabs: String, Equatable, Hashable, Identifiable {
    case myProfile = "My Profile"
    case findFriends = "Find Friends"
    case friendRequests = "Friend Requests"
    case myFriendRequests = "My Requests"
    
    var id: Tabs { self }
}

var body: some View {
    TabView(selection: $selectedTab) {
        Tab(Tabs.myProfile.rawValue, systemImage: "person.circle", value: .myProfile) {
            ProfileScreen(firUser: authViewModel.firUser, isFriend: false)
        }
        Tab(Tabs.findFriends.rawValue, systemImage: "person.crop.badge.magnifyingglass.fill", value: .findFriends) {
            SearchFriendsScreen()
        }
        Tab(Tabs.friendRequests.rawValue, systemImage: "person.crop.circle.badge", value: .friendRequests) {
            FriendRequestsScreen()
        }
        .badge(authViewModel.friendRequests.count)
        
        Tab(Tabs.myFriendRequests.rawValue, systemImage: "person.crop.circle.badge.plus", value: .myFriendRequests) {
            MyRequestsScreen()
        }
    }
    .navigationTitle(selectedTab.rawValue)
}

}