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

Question

我正在尝试使用徽标图像代替该应用程序顶部的NavigationView标题。在导航视图中找不到有关使用图像的任何文档。

Answer 1

SwiftUI 2

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

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

有关更多的展示位置，请参见ToolbarItemPlacement documentation。

Answer 2

我不希望标题图像位于中心还是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 3

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

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

Answer 4

使用这个：

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 5

NavigationView.navigationBarTitle()现在只能 接受Text()参数。您可以改用.navigationBarItems()将Image设置为trailing或leading参数，但这与UINavigationItem.leftBarButtonItem[s]和{{1}的SwiftUI等效。 }，这意味着您只能使用导航栏按钮的尺寸。但是，如果您对此没问题，则可能需要设置一个空白标题，以便可以指定标准高度的导航栏。

硬编码定位

如果您可以忍受自己的生活，则可以 通过对图像周围的填充进行硬编码来伪造居中的导航栏项目，例如

UINavigationItem.rightBarButtonItem[s]

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

硬编码定位

如果您知道所使用图像的确切宽度，则最好将整个内容包装在.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()
    )
)

Answer 6

要扩展NRitH的答案，请将徽标放置在其他组件中（借用React的放置方式）可以帮助希望了解概念的任何人。

实际的图像可以包装在任何容器视图中，例如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)
    }
}

设置长宽比时，只需要在容器视图的框架上设置宽度。我们还可以在 NavLogo 中设置属性，以通过属性依赖项注入设置宽度和/或高度。无论如何，我们的navigationBarItems变得非常简单且更具可读性?

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

Answer 7

尝试以下操作。

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

对我有用。

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

Answer 8

在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)
                                    }
                                )
    }
}