SwiftUI與macOS開發：swiftui修改toolbar/titlebar

網上關於定製macOS-toolbar的文章都比較老，這篇文章講下如何用swiftUI修改toolbar，比較推薦方法二。

方法一：

在Appdelegate文件里加上

let titlebarAccessoryView = TitlebarAccessory().padding([.top, .leading, .trailing], 16.0).edgesIgnoringSafeArea(.all)
        let accessoryHostingView = NSHostingView(rootView:titlebarAccessoryView)
        accessoryHostingView.frame.size = accessoryHostingView.fittingSize

        let titlebarAccessory = NSTitlebarAccessoryViewController()
        titlebarAccessory.view = accessoryHostingView
        titlebarAccessory.layoutAttribute = .trailing

以及

window.addTitlebarAccessoryViewController(titlebarAccessory)

新建一個TitlebarAccessory.swift的文件，內容如下：

import SwiftUI

struct TitlebarAccessory: View {
    var body: some View {
        Text("hello")
    }
}

運行

 

完整代碼：

let contentView = ContentView().environment(\.managedObjectContext, persistentContainer.viewContext).frame(minWidth: 450, maxWidth: .infinity, minHeight: 400, maxHeight: .infinity)

        // Create the titlebar accessory
        let titlebarAccessoryView = TitlebarAccessory().padding([.top, .leading, .trailing], 16.0).edgesIgnoringSafeArea(.all)
        let accessoryHostingView = NSHostingView(rootView:titlebarAccessoryView)
        accessoryHostingView.frame.size = accessoryHostingView.fittingSize

        let titlebarAccessory = NSTitlebarAccessoryViewController()
        titlebarAccessory.view = accessoryHostingView
        titlebarAccessory.layoutAttribute = .trailing

        
        // Create the window and set the content view. 
        window = NSWindow(
            contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
            styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
            backing: .buffered, defer: false)
        window.setFrame(CGRect(x: 10, y: 10, width: 550, height: 650), display: true)
        window.center()
        window.addTitlebarAccessoryViewController(titlebarAccessory)
        window.backgroundColor = NSColor.white
        //window.minSize =  NSSize(width: 500, height: 400)
        //window.setFrameAutosaveName("Main Window")
        window.contentView = NSHostingView(rootView: contentView)
        window.makeKeyAndOrderFront(nil)

 

方法二（推薦）：

1、在AppDelegate中，將ContentView設置爲無視上方安全區域，這樣我們的ContentView就可以直接顯示在toolbar區域。也就是說，我們能方便地在ContentView.swift文件中，用swiftui定製我們的toolbar

let contentView = ContentView().environment(\.managedObjectContext, persistentContainer.viewContext).edgesIgnoringSafeArea(.top).frame(minWidth: 450, maxWidth: .infinity, minHeight: 400, maxHeight: .infinity)

2、設置toolbar部分透明

window.titlebarAppearsTransparent = true
        window.titleVisibility = .hidden

3、效果圖

4、完整代碼

func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Create the SwiftUI view and set the context as the value for the managedObjectContext environment keyPath.
        // Add `@Environment(\.managedObjectContext)` in the views that will need the context.
        
        let contentView = ContentView().environment(\.managedObjectContext, persistentContainer.viewContext).edgesIgnoringSafeArea(.top).frame(minWidth: 450, maxWidth: .infinity, minHeight: 400, maxHeight: .infinity)


        
        // Create the window and set the content view. 
        window = NSWindow(
            contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
            styleMask: [.titled, .closable, .unifiedTitleAndToolbar,.miniaturizable, .resizable, .fullSizeContentView],
            backing: .buffered, defer: false)
        
        //設置標題欄白色 無分界線
        //let customToolbar = NSToolbar()
        //customToolbar.showsBaselineSeparator = false
        window.titlebarAppearsTransparent = true
        window.titleVisibility = .hidden
        //window.backgroundColor = .white
        //window.toolbar = customToolbar
        
        window.setFrame(CGRect(x: 10, y: 10, width: 550, height: 650), display: true)
        window.center()
        //window.addTitlebarAccessoryViewController(titlebarAccessory)
        window.backgroundColor = NSColor.white
        //window.minSize =  NSSize(width: 500, height: 400)
        window.setFrameAutosaveName("Main Window")
        window.contentView = NSHostingView(rootView: contentView)
        window.makeKeyAndOrderFront(nil)
    }