SwiftUI 如何更改 NavigationBarTitle 并从子表单添加按钮答案

【问题标题】：SwiftUI How to change the NavigationBarTitle and add a button from a child formSwiftUI 如何更改 NavigationBarTitle 并从子表单添加按钮
【发布时间】：2020-05-28 05:44:34
【问题描述】：

我有一个有 2 个选项卡的主视图。我将 navigationView 放在母版页上，以便可以在子视图中访问它的功能。但是，标题从未成功分配给主视图。

第二个目标是在子视图的导航按钮上添加一个按钮。但是，表单不会呈现它。

这里是代码。您能帮我从子视图更改标题并从子视图向 NavigationView 添加按钮吗？

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            MainView()
                .navigationBarTitle(Text("App Title"), displayMode: .inline)
        }

    }
}

struct MainView: View {
    var body: some View {
        TabView(){

                DashboardView() 
                .navigationBarTitle(Text("Dashboard"), displayMode: .inline)
                .tabItem{
                    //Image(systemName: "list.dash")
                    Image(systemName: "chart.pie")
                    Text("Dashboard")
            }.tag(0)


                AssignmentView() 
                .navigationBarTitle(Text("Assignments"), displayMode: .inline)

                .tabItem{
                    Image(systemName: "briefcase")
                    Text("Assignments")
            }.tag(1)


        }

    }
}

struct DashboardView: View {
    var body: some View {
        Text("Dashboard View")
            .navigationBarTitle(Text("Dashboard View Title"), displayMode: .inline)

    }
}

struct AssignmentView: View {
    var body: some View {
        Text("Assignment View")
            .navigationBarTitle(Text("Assignments View Title"), displayMode: .inline)
            .navigationBarItems(trailing: Button(action: {
                print("Dashboard button click")
            }) {
                Text("Submit")
            })
    }
}

【问题讨论】：

标签： swiftui swift5 xcode11 navigationview

【解决方案1】：

为了使导航功能正常工作，视图堆栈中应该只有一个NavigationView。我假设您只需要先删除NavigationView，因为您的MainView 是TabView 容器

struct ContentView: View {
    var body: some View {
        MainView()
    }
}

至少对我来说，这种变体给人以原生的外观和感觉。

【讨论】：

对不起，我没有删除它是我的错误，在我的测试代码中我删除了它（我还更新了上面的代码以删除额外的 NavViews）。但标题更新和添加按钮仍有问题。
在所描述的场景中，最好在每个选项卡中使用自己的NavigationView，就像以前一样 + 从ContentView 中删除。 TabView 不打算在 NavigationView 内部，我认为它不是为此目的而设计的，并且应该是自己的视图层次结构的根。

【解决方案2】：

我从 MainView 中删除了 NavView，并在新结构 NavigationTab 的帮助下将 NavViews 添加到子视图中。

struct NavigationTab<Title,   Content>: View where Title: StringProtocol,  Content: View {
    var title: Title
    var content: () -> Content

    var body: some View {
        NavigationView {
            content()
                .navigationBarTitle(Text(title), displayMode: .inline)

        }
    }
}

标签项现在看起来像

NavigationTab(title: "Dashboard" ) {
                    DashboardView()
                        .navigationBarItems(leading: Button(action: {
                            self.isDrawerOpen.toggle()
                        }) {
                            Image(systemName: "sidebar.left")
                        })
                }

                .tabItem{
                    Image(systemName: "chart.pie")
                    Text("Dashboard")
                }.tag(1)

我通过在多个选项卡中复制 DrawerOpen 按钮并分配相同的“isDrawerOpen”变量解决了在 NavView 上添加按钮的初始问题。

但是我在这个过程中仍然有一个用例，我需要向 NavView.trailing 添加一个按钮以进行提交。有没有办法在子视图中添加按钮（例如 DashboardView 调用另一个视图）？

【讨论】：