SwiftUI：图片与导航栏标题间出现两个UI元素的原因咨询

这是因为你的导航栏默认启用了**大标题（Large Title）**模式，SwiftUI在这种模式下会自动创建UINavigationBarLargeTitleView和UINavigationBarContentView这两个底层UIKit容器，用来实现大标题的折叠、布局逻辑，这就导致它们出现在你的图片和导航栏标题之间。

具体细节拆解： #

• 当你只调用.navigationBarTitle(Text(item.name))而没有指定显示模式时，SwiftUI会默认启用大标题模式。这个模式下，导航栏会预留一个可折叠的大标题区域，对应就是UINavigationBarLargeTitleView；而UINavigationBarContentView是导航栏用来承载标题、按钮等内容的基础容器。
• 你的内容是直接放在VStack里作为NavigationView的根视图，没有用ScrollView包裹。大标题模式下，即使没有可滚动的内容，这些底层视图依然会被创建并占据导航栏下方的空间，视觉上就像是在图片和标题之间多了两个额外元素。

两种解决方案： #

1. 切换为紧凑标题模式（推荐，如果你不需要大标题）

显式指定导航栏标题的显示模式为.inline，这样会直接禁用大标题模式，多余的UINavigationBarLargeTitleView就不会被创建：

NavigationView {
    VStack {
        if image != nil {
            image?.resizable().scaledToFit()
        } else {
            Text("Image not loaded")
        }
    }
    .padding([.horizontal, .bottom])
}
.navigationBarTitle(Text(item.name), displayMode: .inline) // 添加displayMode参数
.onAppear(perform: loadImage)

2. 保留大标题，用ScrollView包裹内容

如果你想要保留大标题的折叠效果，只需要把你的VStack放在ScrollView里，这样大标题的布局逻辑会和滚动行为联动，底层视图的空间占用会恢复正常：

NavigationView {
    ScrollView { // 用ScrollView包裹内容
        VStack {
            if image != nil {
                image?.resizable().scaledToFit()
            } else {
                Text("Image not loaded")
            }
        }
        .padding([.horizontal, .bottom])
    }
}
.navigationBarTitle(Text(item.name))
.onAppear(perform: loadImage)

你可以通过Xcode的「Debug View Hierarchy」工具验证，切换后那两个多余的元素要么消失，要么布局不再干扰你的图片和导航栏标题的间距。

内容的提问来源于stack exchange，提问作者Horatiu