0

I've been trying to set up liquid glass effect like on screenshot below and can't figure out how to do it. Tried official documentation methods even with .glassEffect(.clear) but got nothing.

-> swift --version
swift-driver version: 1.127.14.1 Apple Swift version 6.2 (swiftlang-6.2.0.19.9 clang-1700年3月19日.1)
Target: arm64-apple-macosx26.0
-> sw_vers
ProductName: macOS
ProductVersion: 26.0.1
BuildVersion: 25A362

what I want

I'm using AppKit to set up my window and NSHostingView to host SwiftUI.

what I've got

Here's the code.

window setup:

 @MainActor
 private func setupWindow() {
 let barHeight: CGFloat = 35
 let barHorizontalCut: CGFloat = 10
 let barVerticalCut: CGFloat = 2
 guard let mainScreen = NSScreen.main else { return }
 let screenFrame = mainScreen.frame
 let frame = NSRect(
 x: barHorizontalCut,
 y: screenFrame.height - barHeight - barVerticalCut,
 width: screenFrame.width - barHorizontalCut * 2,
 height: barHeight - barVerticalCut
 )
 window = BarWindow(
 contentRect: frame,
 styleMask: [.borderless],
 backing: .buffered,
 defer: false
 )
 window.isOpaque = false
 window.backgroundColor = .clear
 window.level = NSWindow.Level(rawValue: NSWindow.Level.statusBar.rawValue - 1)
 window.ignoresMouseEvents = false
 window.collectionBehavior = [.canJoinAllSpaces, .stationary, .ignoresCycle]
 window.hasShadow = false
 window.orderBack(nil)
 let container = NSView(frame: frame)
 container.wantsLayer = true
 container.layer?.backgroundColor = .clear
 // ensure container's layer is not opaque so alpha can show through
 container.layer?.isOpaque = false
 container.layer?.cornerRadius = 16
 container.layer?.masksToBounds = true
 // Host a SwiftUI view inside AppKit
 let hostingView = NSHostingView(rootView: BarContentView()
 .frame(maxWidth: .infinity, maxHeight: .infinity))
 
 hostingView.translatesAutoresizingMaskIntoConstraints = false
 container.addSubview(hostingView)
 // Constrain hosting view to container
 NSLayoutConstraint.activate([
 hostingView.leadingAnchor.constraint(equalTo: container.leadingAnchor),
 hostingView.trailingAnchor.constraint(equalTo: container.trailingAnchor),
 hostingView.topAnchor.constraint(equalTo: container.topAnchor),
 hostingView.bottomAnchor.constraint(equalTo: container.bottomAnchor)
 ])
 window.contentView = container
 window.makeKeyAndOrderFront(nil)
 }

widget setup:

 // deleted unnecessary code
 HStack(spacing: 0) {
 HStack(spacing: 8) {
 timeButton(width: timeButtonWidth, height: widgetHeight, cornerRadius: cornerRadius)
 }
 }
 }
 func timeButton(width: CGFloat, height: CGFloat, cornerRadius: CGFloat) -> some View {
 TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
 Button(action: {
 let url = URL(fileURLWithPath: "/System/Applications/Calendar.app")
 NSWorkspace.shared.open(url)
 }) {
 HStack(spacing: 4) {
 Image(systemName: "calendar")
 .foregroundColor(.white)
 .background(.clear)
 .font(.system(size: 12))
 Text(timeline.date.formatted(date: .abbreviated, time: .standard))
 .foregroundColor(.white)
 .background(.clear)
 .font(.system(size: 12))
 }
 .frame(width: width, height: height)
 .glassEffect(.clear)
 }
 .frame(width: width, height: height)
 .cornerRadius(cornerRadius)
 }
 }
asked yesterday
New contributor
Vietnam Veteran is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.