为什么图片会影响导航栏中的放置位置？

Question

在尝试向导航栏添加图像时，我注意到图像没有放置在与系统图像或文本相同的位置。我有一个

ToolbarItem

，其中包含带有图像和文本的

VStack

。

ToolbarItem

与

topBarLeading

对齐，因此它放置在左侧。

VStack

具有

center

对齐方式，因此图像和文本在中心彼此对齐。当我使用 SF 符号时，一切都在我期望的位置。当我更改已调整大小和缩放以适合的图像的符号时，所有内容都比我预期的更向右偏移。是什么导致了这种行为以及如何使图像和文本位于左侧？

这就是带有 SF 符号的工具栏项目的外观。

ToolbarItem(placement: .topBarLeading) {
    VStack(alignment: .center) {
        Image(systemName: "magnifyingglass")
            .resizable()
            .scaledToFit()

        Text("Test text")
    }
}

这就是工具栏项目与图像的外观。 图片取自维基百科的放大镜页面。

ToolbarItem(placement: .topBarLeading) {
    VStack(alignment: .center) {
        Image(.magGlassRequest)
            .resizable()
            .scaledToFit()

        Text("Test text")
    }
}

Answer 1

我认为发生这种情况是因为布局是基于图像的理想尺寸。

您使用的图像尺寸为456×373，因此如果iPhone屏幕纵向宽度为393，它将居中。

如果切换到横向，它不再居中：

要解决此问题，请尝试应用不同的理想尺寸来约束图像：

Image(.magGlassRequest)
    .resizable()
    .scaledToFit()
    .frame(idealHeight: 40) // 👈 HERE