Text() 和 .navigationBarTitle() 具有不同的左边距

Question

在此代码中，Text("Text 2") 到屏幕左侧的边距比 .navigationBarTitle("Text 1") 更小。适用于 iPhone 15 Pro Max。

如何对齐左边距以使它们相同？

如果您在尺寸较小的 iPhone SE (Xcode) 上检查此代码，边距大致相同，但它不断变化。

非常感谢您的帮助！

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                HStack {
                    Text("Text 2")
                    Spacer()
                }
                Spacer()
            }
            .padding(.horizontal)
            .navigationBarTitle("Text 1")
        }
    }
}

Answer 1

导航标题有自己的样式和定位。 iPhone 15 和 iPhone SE 上的默认左边距似乎是 16pt。

NavigationStack

中的内容通常会占据整个屏幕宽度。您已将

.padding()

应用于您的

VStack

，因此这就是为什么您的较小文本具有您所看到的边距。但正如 Sweeper 在评论中所说，没有理由让这个（未指定的）填充应该与导航标题的（原生）边距相匹配。

您可以通过指定水平填充的大小（至少基于当前设备和 iOS 版本）使其在 iPhone 上更加一致地工作：

NavigationStack {
    VStack {
        // ...
    }
    .padding(.horizontal, 16) // 👈 HERE
    .navigationBarTitle("Text 1")
}

不幸的是，这在 iPad 上效果不太好，因为 iPad 上标题的原生边距似乎更大。因此，使用这种方法，您可能必须考虑使填充取决于设备尺寸。

如果您想确保标题始终与内容对齐，那么您最好用您自己的自定义标题替换本机导航标题。 更改 SwiftUI 中的 NavigationStack 标题字体、色调和背景的答案显示了如何完成此操作。