首页 > 解决方案 > 在根据条件显示的两个视图上使用相同的 `navigationBarTitle` 和 `navigationBarItems`

问题描述

我有一个视图,它显示Text视图以显示帮助文本,供用户点击加号图标以添加组。添加组后,它会显示List视图。要显示导航栏,我需要同时调用和navigationBarTitle查看。下面是我的代码片段。navigationBarItemsTextList

import SwiftUI

struct Home:View {
    @EnvironmentObject var dataStore:DataStore
    var body: some View {
        NavigationView {
            if dataStore.groups.isEmpty {
                Text("Tap on + icon to add group.")
                    .font(.caption)
                    .multilineTextAlignment(.center)
                    .padding()
                    .foregroundColor(.gray)
                    .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
                    .navigationBarItems(
                        trailing:
                            NavigationLink(
                                destination:
                                    CreateGroup(),
                                label: {
                                    Image(systemName: "plus")
                                        .foregroundColor(Color.blue)
                                })
                    )
            } else {
                List(dataStore.groups) { groupElement in
                    GroupRow(group: groupElement)
                }
                .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
                .navigationBarItems(
                    trailing:
                        NavigationLink(
                            destination:
                                CreateGroup(),
                            label: {
                                Image(systemName: "plus")
                                    .foregroundColor(Color.blue)
                            })
                )
            }
        }
    }
}

有没有办法只调用一次而不是同时调用navigationBarTitle和视图?navigationBarItemsTextList

标签: iosswiftuiswiftui-navigationlinkswiftui-navigationview

解决方案


有没有办法只调用一次 navigationBarTitle 和 navigationBarItems 而不是同时调用 Text 和 List 视图?

是的,您可以将条件包装到任何容器中,例如 Group 或 xStack:

struct Home:View {
    @EnvironmentObject var dataStore:DataStore
    var body: some View {
        NavigationView {
            Group {
                if dataStore.groups.isEmpty {
                    Text("Tap on + icon to add group.")
                        .font(.caption)
                        .multilineTextAlignment(.center)
                        .padding()
                        .foregroundColor(.gray)
                } else {
                    List(dataStore.groups) { groupElement in
                        GroupRow(group: groupElement)
                    }
                }
            }
            .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
            .navigationBarItems(
                trailing:
                    NavigationLink(
                        destination:
                            CreateGroup(),
                        label: {
                            Image(systemName: "plus")
                                .foregroundColor(Color.blue)
                        })
            )

        }
    }
}

推荐阅读