如何在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文档。

Answer 2

用这个：

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 3

NavigationView.navigationBarTitle()可只取一个Text()参数现在。您可以改用将或.navigationBarItems()设置Image为trailing或leading参数，但这与UINavigationItem.leftBarButtonItem[s]和等效于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()
    )
)

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

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

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

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

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