如何在 SwiftUI 的 NavigationView 中放置徽标？

Question

我正在尝试在应用程序的顶部使用徽标图像而不是 NavigationView 标题。 找不到在 NavigationView 中使用图像的任何文档。

Answer 1

SwiftUI 2

在 SwiftUI 2 / iOS 14 中，您可以使用principal位置创建一个ToolbarItem ：

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Test")
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
        }
    }
}

有关更多展示位置，请参阅ToolbarItemPlacement文档。

Answer 2

NavigationView.navigationBarTitle()现在只能接受一个Text()参数。 您可以改为使用.navigationBarItems()将Image设置为trailing或leading参数，但这是UINavigationItem.leftBarButtonItem[s]和UINavigationItem.rightBarButtonItem[s]的 SwiftUI 等效项，这意味着您仅限于导航条形按钮尺寸。 但是，如果您对此感到满意，您可能希望设置一个空白标题，以便您可以指定标准高度的导航栏。

硬编码定位

如果你能忍受自己，你可以通过在图像周围硬编码填充来伪造一个居中的导航栏项目，比如

.padding(.trailing, 125),

（请注意，我故意将它放在偏离中心的位置，以便您可以看到它是硬编码的。）

稍微减少硬编码定位

更好的是将整个内容包装在GeometryReader { geometry in ... }块中以使用屏幕尺寸来计算精确定位，如果您知道您正在使用的图像的确切宽度：

GeometryReader { geometry in
    NavigationView {
        ...
    }
        .navigationBarTitle(Text(""), displayMode: .inline)
        .navigationBarItems(trailing:
            PresentationButton(
                Image(systemName: "person.crop.circle")
                    .imageScale(.large)
                    .padding(.trailing, (geometry.size.width / 2.0) + -30), // image width = 60
                destination: ProfileHost()
            )
        )

如果您不想破解它，您可以执行以下操作：

标准导航栏高度，左按钮项

.navigationBarTitle(Text(""), displayMode: .inline)
.navigationBarItems(leading:
    PresentationButton(
        Image(systemName: "person.crop.circle")
            .imageScale(.large)
            .padding(),
        destination: ProfileHost()
    )
)

标准导航栏高度，右键项目

.navigationBarTitle(Text(""), displayMode: .inline)
.navigationBarItems(trailing:
    PresentationButton(
        Image(systemName: "person.crop.circle")
            .imageScale(.large)
            .padding(),
        destination: ProfileHost()
    )
)

扩展导航栏高度，无标题，左按钮项

.navigationBarItems(leading:
    PresentationButton(
        Image(systemName: "person.crop.circle")
            .imageScale(.large)
            .padding(),
        destination: ProfileHost()
    )
)

Answer 3

使用SwiftUIX ，您可以使用navigationBarTitleView(View) ：

NavigationView() {
    NavigationLink(destination:YourView().navigationBarTitleView(Image(systemName: "message.fill")))
}

Answer 4

我不想声称标题图像是否位于中心但在视觉上它看起来对我来说是中心的 100% 准确度。 做你的判断并调整填充:)

这是代码：

            .navigationBarTitle(
            Text("")
            , displayMode: .inline)
            .navigationBarItems(leading:
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "arrow.left")
                    }.foregroundColor(Color.oceanWhite)
                    Image("oceanview-logo")
                        .resizable()
                        .foregroundColor(.white)
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 60, height: 40, alignment: .center)
                    .padding(UIScreen.main.bounds.size.width/4+30)
                }
                ,trailing:

                HStack {

                    Button(action: {
                    }) {
                        Image(systemName: "magnifyingglass")
                        }.foregroundColor(Color.oceanWhite)
                }
        )

Answer 5

为了扩展 NRitH 的答案，将您的徽标放在不同的组件中（借用 React 的放置方式）可能会帮助任何希望理解这些概念的人。

实际的 Image 可以包装在任何容器视图中，例如 VStack 等。 将结构设置为要在导航项中使用的组件的示例可能如下所示：

struct NavLogo: View {

    var body: some View {
            VStack {
                Image("app-logo")
                    .resizable()
                    .aspectRatio(2, contentMode: .fit)
                    .imageScale(.large)
            }
            .frame(width: 200)
            .background(Color.clear)
    }
}

设置纵横比后，只需要在容器视图的frame上设置宽度即可。 我们还可以在NavLogo 中设置一个属性来设置属性依赖注入的宽度和/或高度。 无论如何，我们的 navigationBarItems 变得非常直接且更具可读性 🙂

NavigationView {
    Text("Home View")
        .navigationBarItems(
            leading: NavLogo()
            trailing: ProfileButton()
        )
    }

Answer 6

在 iOS 13 上，实现这一点的小技巧：

private var logo: some View {
    Image("logo-image")
}

var body: some View {
    GeometryReader { g in
        content()
            .navigationBarTitle("")
            .navigationBarItems(leading:
                                    ZStack(alignment: .leading) {
                                        logo.frame(width: g.size.width).padding(.trailing, 8)
                                        HStack {
                                            leadingItems().padding(.leading, 10)
                                            Spacer()
                                            trailingItems().padding(.trailing, 10)
                                        }
                                        .frame(width: g.size.width)
                                    }
                                )
    }
}

Answer 7

用户这个：

NavigationView {
    Text("Hello, SwiftUI!")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                HStack {
                    Image(systemName: "sun.min.fill")
                    Text("Title").font(.headline)
                }
            }
        }
}

信用： https : //sarunw.com/posts/custom-navigation-bar-title-view-in-swiftui/

Answer 8

我正在尝试在应用程序顶部使用徽标图像而不是NavigationView标题。 在NavigationView中找不到使用图像的任何文档。

Answer 9

请尝试以下操作。

struct ContainerView: View {
    var body: some View {
        VStack {
            Image(systemName: "person.crop.square")
            ContentView()
        }
    }
}

它对我有用。

在模拟器或设备上运行之前，请确保在 SceneDelegate.swift 中将 ContentView 更改为 ContainerView。