SwiftUI设置工具栏背景的toolbarBackground修饰符
SwiftUI设置工具栏背景的toolbarBackground修饰符

SwiftUI设置工具栏背景的toolbarBackground修饰符

.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

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开放者。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注