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

【问题标题】：Having Tab bar and Navigationbar in the same View in SwiftUI?在 SwiftUI 的同一个视图中拥有标签栏和导航栏？
【发布时间】：2021-01-29 21:45:14
【问题描述】：

我正在尝试学习 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()
        
    }
}

【问题讨论】：

那么您的当前代码有什么问题？
@Asperi，我在屏幕底部只有一个标签栏。我也需要屏幕顶部的导航栏。
stackoverflow.com/questions/31548909/…
@Wings，这是 SwiftUI。
是的，你也可以在 swiftUI 中使用相同的逻辑；）

标签： swift swiftui

【解决方案1】：

使用以下组件 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")
                }
            }
        }
        
    }
}

【讨论】：

【解决方案2】：

这是一个可能的解决方案。使用 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")
                 }
             }
         }
        
    }
}

【讨论】：