.toolbarBackground(_:) 是 SwiftUI 中一个修饰符,用于设置工具栏(如导航栏或底部工具栏)的背景样式。.automatic 是这个修饰符的一个参数选项,它告诉系统根据上下文自动选择最合适的背景样式。
修饰符参数
.toolbarBackground(_: .automatic)
自动选择背景:系统会根据当前的界面样式(如浅色模式或深色模式)和工具栏的上下文,自动为工具栏选择背景样式。
动态适配:这种方式会动态适配系统的外观和主题,例如浅色模式时工具栏可能是白色背景,深色模式时可能是深色背景。
适合默认情况:如果不需要自定义工具栏背景,使用 .automatic 是最简洁的方式。
常用参数
.toolbarBackground 的常用参数包括颜色、系统材质、渐变和透明等选项,用于自定义工具栏的背景样式。以下是一些常用的参数和它们的作用:
系统默认选项
1、.automatic
说明:系统根据上下文自动设置合适的背景样式(默认值)。
适用场景:保持与系统一致的外观。
示例:
.toolbarBackground(.automatic)

2、.visible
说明:强制显示工具栏背景,无论视图层次。
适用场景:确保工具栏背景不会被隐藏。
示例:
.toolbarBackground(.visible)

3、hidden
说明:隐藏工具栏背景。
适用场景:创建全屏界面,或需要工具栏无背景时。
示例:
.toolbarBackground(.hidden)

自定义颜色
任意颜色
说明:可以使用系统颜色或自定义颜色。
适用场景:需要特定颜色作为背景时。
示例:
.toolbarBackground(Color.blue)

系统材质(Material)
系统材质提供模糊效果,适用于不同的设计风格:
1、.ultraThinMaterial
说明:极薄的模糊效果。
适用场景:想要轻微的模糊背景时。
示例:
.toolbarBackground(.ultraThinMaterial)

2、.thinMaterial
说明:较明显的模糊效果。
示例:
.toolbarBackground(.thinMaterial)

3、.regularMaterial
说明:普通程度的模糊。
示例:
.toolbarBackground(.regularMaterial)

4、.thickMaterial
说明:较厚的模糊效果。
适用场景:模糊感更强的设计需求。
示例:
.toolbarBackground(.thickMaterial)

透明背景
.clear
说明:完全透明的背景。
适用场景:需要移除工具栏背景的场景。
示例:
.toolbarBackground(.clear)

实际场景
在SwiftUI中,当通过NavigationStack跳转到地图视图时,显示的地图样式为:

这里的地图顶部存在空白区域,因此需要使用toolbarBackground修饰符,将空白区域隐藏。
Map(position: $position)
.toolbarBackground(.automatic)
设置地图视图的toolbarBackground为automatic后。

Toolbar的空白区域得到很好的隐藏。
使用场景
默认样式:使用 .automatic 保持系统的一致性。
自定义样式:根据 UI 设计需求设置具体的颜色或材质。
透明效果:在需要无工具栏背景的情况下使用 .clear。
.toolbarBackground(_:) 提供了灵活的背景控制,可以让工具栏更贴合设计需求或系统主题。
总结
.toolbarBackground 的参数非常灵活,涵盖从系统默认样式到完全自定义的颜色、材质、渐变和图片选项。根据设计需求选择合适的参数,可以轻松调整工具栏的背景样式。
参考文章
iOS 18, SwiftUI 6, & Swift 6: 从零开始构建iOS应用程序, 涵盖visionOS, macOS, watchOS:https://www.bilibili.com/video/BV1b6421f7Px?spm_id_from=333.788.videopod.episodes&vd_source=f21219cb93118beac6a36b0ef961df6a&p=10