TabBar 视图中的 SwiftUI 工具栏

Question

我的第一个视图有一个带标签栏视图的 NavigationView

struct TestView: View {
    var body: some View {
        NavigationView {
            TabTestView()
        }
    }
}

在标签栏中，我有两个视图，比如 TestView1 和 TestView2。

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
    }
}

我现在需要向 TestView1 添加一个工具栏按钮。这是我这样做的尝试：

struct TestView1: View {
var body: some View {
    Text("Hello World")
        .navigationTitle("Test View 1")
        .toolbar {
              ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Save") {
                        print("Toolbar button click")
                    }
                  }
        }
    }
}

虽然这会将导航标题添加到页面，但不会添加工具栏按钮，如下面的屏幕截图所示：

但是，如果我将工具栏添加到 TabTestView，如下所示，工具栏按钮会显示。

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
        .toolbar {
              ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Save") {
                        print("Toolbar button click")
                    }
                  }
        }
    }
}

这是一个问题 - 单击按钮时要执行的代码取决于 TestView1 中的变量，将工具栏添加到 TabTestView 感觉不对，从语义上讲工具栏“属于”TestView1。

如有任何想法，我们将不胜感激。

Answer 1

一旦我有了工作代码，我就意识到我以前见过这个。它似乎是 SwiftUI 中的一个错误。 TabView 和 NavigationView 不能一起玩。你会发现我的很多答案都会在视图层次结构的顶部说一个 NavigationViews ，这就是你所做的。这在这种情况下不起作用。解决方法是在选项卡的每个视图中分别放置一个 NavigationViews 以使其起作用。对于每个层次结构，您仍然会获得所有正确的 NavigationViews 行为，但它是重复的。我不认为我曾经提交过雷达，但我今天会 post 这里的雷达编号。

struct TestView: View {
    var body: some View {
        // NavigationView { //Remove this NavigationView
            TabTestView()
        // }
    }
}

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
    }
}

struct TestView1: View {
    var body: some View {
        NavigationView { // Add here
            Text("Hello World 1")
                .navigationTitle("Test View 1")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            print("Toolbar button click")
                        }
                    }
                }
        }
    }
}


struct TestView2: View {
    var body: some View {
        NavigationView { // Add here
            Text("Hello World 2")
                .navigationTitle("Test View 2")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            print("Toolbar button click")
                        }
                    }
                }
        }
    }
}

雷达编号为FB9727010。

TabBar 视图中的 SwiftUI 工具栏

SwiftUI Toolbar In a TabBar View

toolbar

swiftui

swiftui-tabview

swiftui-navigationview