SwiftUI

2023 年 11 月 26 日

SwiftUI 調整 macOS App 工具列的顯示樣式

已複製到剪貼板


windowToolbarStyle 可以指定 Toolbar 在 Window 中的呈現樣式。

SwiftUI 和 macOS
SwiftUI 和 macOS

WindowToolbarStyle 概覽

當我們沒特別設定 WindowToolbarStyle 時,預設就是 DefaultWindowToolbarStyle,等同於用 automatic 指定。

@main
struct Example: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowToolbarStyle(.automatic)
    }
}

不過要特別注意,因為畢竟 windowToolbarStyle 是用來指定 Toolbar 在 Window 中的樣式,所以 WindowGroup 裡面裝的 View(這裡是 ContentView)至少要有 Toolbar,不然也看不出變化。

ExpandedWindowToolbarStyle(.expanded

expanded 會把 Window 的 title bar 與 toolbar 展開,也就是分成兩行。

.windowToolbarStyle(.expanded)
SwiftUI 在 macOS 上,windowToolbarStyle 為 ExpandedWindowToolbarStyle 的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 ExpandedWindowToolbarStyle 的樣式

UnifiedWindowToolbarStyle(.unified

unified 會把 Window 的 title bar 與 toolbar 合在同一行。

.windowToolbarStyle(.unified)
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedWindowToolbarStyle 的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedWindowToolbarStyle 的樣式

這裡我們直接指定 unified,預設會顯示 Window 的 title,我們還能額外多指定要不要顯示 title。

UnifiedWindowToolbarStyle(.unified(showsTitle:)

把 unified(showsTitle:) 的 showsTitle 給 false 可以把 Window 的 title 隱藏。

.windowToolbarStyle(.unified(showsTitle: false))
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedWindowToolbarStyle 且隱藏標題的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedWindowToolbarStyle 且隱藏標題的樣式

討論

看到這裡,可能就有些人會想說,那跟 .windowStyle(.hiddenTitleBar) 差在哪,其實主要是差在有沒有 title bar,.unified(showsTitle: false) 只是把 title 隱藏而已,title bar 還是在,可以很明顯的看到 title bar 跟主內容相比有比較淡的底色跟分隔線。但 .windowStyle(.hiddenTitleBar) 就是直接把 title bar 給隱藏了,直接看圖就一目了然了!

SwiftUI 在 macOS 上,windowToolbarStyle 為 HiddenTitleBarWindowStyle 的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 HiddenTitleBarWindowStyle 的樣式

UnifiedCompactWindowToolbarStyle(.unifiedCompact

unifiedCompact 跟 unified 差不多,只差在它會有高度比較緊密的 Window title bar,也就是 title bar 較細的意思。

.windowToolbarStyle(.unifiedCompact)
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedCompactWindowToolbarStyle 的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedCompactWindowToolbarStyle 的樣式

UnifiedCompactWindowToolbarStyle(.unifiedCompact(showsTitle:)

unifiedCompact(showsTitle:) 和 unified(showsTitle:) 一樣,都是多了個參數讓我們可以隱藏 Window 的 title。

.windowToolbarStyle(.unifiedCompact(showsTitle: false))
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedCompactWindowToolbarStyle 且隱藏標題的樣式
SwiftUI 在 macOS 上,windowToolbarStyle 為 UnifiedCompactWindowToolbarStyle 且隱藏標題的樣式

分享文章

已複製到剪貼板

主題文章

查看 SwiftUI

超級感謝

關於 XcodeProject

XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。


Contacts

Ricky Chuang

XcodeProject

RickyChuang.xcodeproj@gmail.com

XcodeProject 聯絡

contact.xcodeproj@gmail.com

最新文章