PAYATHON 2026

SwiftUI 如何实现随内容适配颜色的 macOS 工具栏?

数据小陈

结论

SwiftUI 可以设置 macOS 窗口工具栏的背景可见性、背景样式和颜色方案,但不会自动分析主视图的像素来切换标题颜色。若要让标题或工具栏文字随文档内容变化,应用需要根据自身的内容状态选择合适的 ColorScheme,并将其应用到 .windowToolbar。

.toolbarBackgroundVisibility(.hidden, for: .windowToolbar) 控制的是工具栏背景是否显示,不会根据中间视图的颜色调整标题。SwiftUI 的 .toolbarBackground 和 .toolbarColorScheme 分别用于设置工具栏背景样式和颜色方案。Apple 文档:toolbarBackgroundVisibility;Apple 文档:toolbarColorScheme

设置半透明工具栏

可以使用系统材质作为工具栏背景,并指定浅色或深色内容方案:

struct EditorView: View {
    @State private var toolbarScheme: ColorScheme = .light

    var body: some View {
        HStack(spacing: 0) {
            SidebarView()
            ArtworkView()
            InspectorView()
        }
        .toolbarBackground(.ultraThinMaterial, for: .windowToolbar)
        .toolbarBackgroundVisibility(.visible, for: .windowToolbar)
        .toolbarColorScheme(toolbarScheme, for: .windowToolbar)
    }
}

SidebarView、ArtworkView 和 InspectorView 是应用的三个区域。将 .windowToolbar 修饰符放在能影响窗口工具栏的视图层级上。视图容器结构不同,修饰符的位置也可能需要调整。

如果希望工具栏背景完全透明,可以使用 .toolbarBackgroundVisibility(.hidden, for: .windowToolbar)。这会隐藏背景,但不会替应用判断文字颜色。

根据内容切换文字颜色方案

应用可以根据已有的内容状态来设置 toolbarScheme。例如,编辑器可以参考当前画布主题、预设背景色或图片主色,选择 .light 或 .dark。下面的代码展示如何将状态连接到工具栏;颜色判断逻辑需要根据应用的实际内容实现:

func updateToolbarScheme(for backgroundIsDark: Bool) {
    toolbarScheme = backgroundIsDark ? .light : .dark
}

传给 .toolbarColorScheme 的方案应与背景保持足够的对比度。内容持续变化时,可以在内容状态更新后重新计算并设置方案。系统不会自动根据窗口下方的图像推断合适的标题颜色。

需要留意

.ultraThinMaterial 会呈现系统材质效果,具体外观受窗口内容和系统外观影响。它本身不等同于 Icon Composer 的完整界面实现。SwiftUI 公开的工具栏修饰符可以控制背景和颜色方案,但仅凭这些修饰符无法确认 Icon Composer 内部采用了哪种实现。要复现更细致的布局或自定义标题栏行为,还需要结合应用自身的视图结构实现。

备注:内容仅供参考。