写了一个小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),这个空白区域就消失了: