swiftui中NavigationStack布局navigationBarTitleDisplayMode作用，以及内容顶部空白区域解决办法

写了一个小demo用于学习NavigationStack和toolbar/ToolbarItem知识，但是在写一个瀑布流布局的时候，设置了顶部的toolbar，然后内容区域的顶部出现了一大片空白区域，这样的效果并不是很美观很好看，所以就想着研究解决一下，下面是我的测试代码：

//
//  Hongshu.swift
//  SwiftBook
//
//  Created by Song on 2024/7/6.
//

import SwiftUI

struct 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)，这个空白区域就消失了：