在 SwiftUI 的同一个视图中具有标签栏和导航栏？

Question

我正在尝试学习 SwiftUI，但我想知道是否可以在同一个项目中同时拥有导航栏和标签栏？

我目前有一个标签栏，但我需要有一个导航栏，中间有一些按钮和徽标。

我如何实现这一目标？

这是我当前的代码：

struct ContentView: View {
    var body: some View {
    

        
        
        TabView {
            
             NavigationView{
                 FirstView()
                
             }
             .tabItem {
                 VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                
                 }

    
             }
             
             NavigationView{
                 SecondView()
             }
             .tabItem {
                 VStack{
                     Image("second")
                     Text("Second")
                 }
             }
         }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        
    }
}

Answer 1

这是一个可能的解决方案。使用 Xcode 12.4 / iOS 14.4 测试

struct ContentView: View {
    var body: some View {
        TabView {
             NavigationView{
                 FirstView()
                   .navigationBarTitle("First", displayMode: .inline)  // << !!
             }
             .tabItem {
                 VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                 }
             }
             
             NavigationView{
                 SecondView()
                   .navigationBarTitle("Second", displayMode: .inline) // << !!
             }
             .tabItem {
                 VStack{
                     Image("second")
                     Text("Second")
                 }
             }
         }
        
    }
}

Answer 2

使用以下组件 navigationBarItems、navigationBarTitle、toolbar 和 ToolbarItem

struct ContentViewTab: View {
    var body: some View {
        
        TabView {
            NavigationView{
                Color.red
                    .navigationBarTitle("Home", displayMode: .inline)
                    .toolbar {
                        ToolbarItem(placement: .principal) {
                            Image(systemName: "star.fill")
                        }
                    }
                    .navigationBarItems(leading: Button("Left") {}, trailing: Button("Right") {})
            }
            .tabItem {
                VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            }
            
            NavigationView{
                Color.green
                    //                    .item
                    .navigationBarTitle("Second", displayMode: .inline)
            }
            .tabItem {
                VStack{
                    Image("second")
                    Text("Second")
                }
            }
        }
        
    }
}