首页 > 解决方案 > SwiftUI navigationBarItems 在 TabView 中消失

问题描述

我有一个包含导航栏项目的视图,我将该视图嵌入到TabView. 但是这样做时,栏项目不再出现。如果我在 a 之外调用视图,TabView一切都会按预期工作。

下面是一个小示例项目来说明我的问题,请注意TabView最初没有调用,ContentView但后来调用了:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            NavigationLink(destination: WarehouseOrderTabView()){
                Text("Click me")
            }
        }
    }
}

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

struct WarehouseOrderTabView: View {
    var body: some View {
        TabView{
            TabView1().navigationBarTitle("Dashboard")
                .tabItem {
                    Image(systemName: "gauge")
                    Text("Dashboard")
            }

            TabView2().navigationBarTitle("Orders")
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Orders")
            }
        }
    }
}

struct TabView1: View {
    var body: some View {
        Text("TabView 1")
            //I would expect to see those bar items when displaying tab 1
            .navigationBarItems(trailing: (
                HStack{
                    Button(action: {
                    }, label: {
                        Image(systemName: "arrow.clockwise")
                            .font(.title)
                    })
                        .padding(.init(top: 0, leading: 0, bottom: 0, trailing: 20))
                    Button(action: {

                    }, label: {
                        Image(systemName: "slider.horizontal.3")
                            .font(.title)
                    })
                }
            ))
    }
}

struct TabView2: View {
    var body: some View {
        Text("TabView 2")
    }
}


我在这里想念什么?

标签: swiftswiftui

解决方案


ANavigationView可以嵌入到 a 中TabView,反之亦然。

TabView包含不同tabItem()的(最多 5 个)可以包含您的视图。

这就是你可以使用它的方式。

TabView1.swift

struct TabView1: View {
    var body: some View {
        NavigationView {
            Text("TabView 1")
                .navigationBarTitle("Dashboard")
                .navigationBarItems(trailing:
                    HStack {
                        Button(action: {
                            // more code here
                        }) {
                            Image(systemName: "arrow.clockwise")
                                .font(.title)
                        }
                        Button(action: {
                            // more code here
                        }) {
                            Image(systemName: "slider.horizontal.3")
                                .font(.title)
                        }
                    }
                )
        }
    }
}

TabView2.swift

struct TabView2: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: YourNewView()) {
                Text("TabView 1")
            }
            .navigationBarTitle("Orders")
        }
    }
}

内容视图.Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TabView1()
               .tabItem {
                   Image(systemName: "gauge")
                   Text("Dashboard")
               }
            TabView2()
               .tabItem {
                   Image(systemName: "list.dash")
                   Text("Orders")
               }
        }
    }
}

希望能帮助到你 :)


推荐阅读