寫了一個小demo用于學習NavigationStack和toolbar/ToolbarItem知識，但是在寫一個瀑布流布局的時候，設置了頂部的toolbar，然后內容區域的頂部出現了一大片空白區域，這樣的效果并不是很美觀很好看，所以就想著研究解決一下，下面是我的測試代碼：

//
//  Hongshu.swift
//  SwiftBook
//
//  Created by Song on 2024/7/6.
//import SwiftUIstruct Hongshu: View {var body: some View {NavigationStack {ScrollView(content: {HStack(content: {VStack(content: {Image("juzi").resizable().aspectRatio(contentMode: .fit)Image("lizhi").resizable().aspectRatio(contentMode: .fit)Spacer()})VStack(content: {Image("putao").resizable().aspectRatio(contentMode: .fit)Image("xigua").resizable().aspectRatio(contentMode: .fit)Spacer()})}).padding(.horizontal)}).toolbar {ToolbarItem(placement: .principal, content: {HStack {Text("首頁")Text("附近")Text("推薦")}})}}}
}#Preview {Hongshu()
}

其實這個問題的解決辦法就是添加一行：

.navigationBarTitleDisplayMode(.inline)

可以看到空白區域就消失了：?

那這個navigationBarTitleDisplayMode是干什么用的呢？

用于設置視圖的導航欄標題的顯示模式。它的值是一個枚舉類型.automatic、.inline、.large。

看官方文檔說明：navigationBarTitleDisplayMode(_:) | Apple Developer Documentation

不同的樣式展示：

.automatic:這是默認樣式，會自動放在左側顯示

.inline：中間標題，類似微信標題

.large：和automatic類似

那可能就有異味了：我也沒有設置navigationBarTitle這個內容啊，為啥就對我的內容布局有影響呢？因為默認使用的automatic，并且當你設置了ToolbarItem(placement: .principal 的時候，即便你設置了navigationBarTitle，如果你的navigationBarTitleDisplayMode為inline，navigationBarTitle也不會顯示，但是如果你設置了navigationBarTitleDisplayMode為automatic，它還是會占位置的:

因為默認是automatic，而且你沒有設置navigationBarTitle，所以這個位置就是默認空著，占一個空白區域。

所以只要設置.navigationBarTitleDisplayMode(.inline)，這個空白區域就消失了：