MacOS开发:如何实现与系统锁屏界面一致的文字效果
如何实现与Mac锁屏界面一致的文字效果

我尝试将NSTextField对象添加到NSVisualEffectView对象中,但未达到预期效果。
let visualEffectView = NSVisualEffectView(frame: view.bounds) visualEffectView.material = .hudWindow visualEffectView.state = .active visualEffectView.appearance = NSAppearance(named: .darkAqua) visualEffectView.wantsLayer = true view.addSubview(visualEffectView) let label = NSTextField(frame: visualEffectView.bounds) label.stringValue = "Hello, World!" label.isEditable = false label.isBordered = false label.backgroundColor = NSColor.clear label.textColor = NSColor.white label.font = NSFont.boldSystemFont(ofSize: 80) label.wantsLayer = true visualEffectView.addSubview(label)

要实现Mac锁屏的文字效果,需调整视觉效果视图样式与文字阴影效果,具体修改如下:
调整NSVisualEffectView参数
锁屏的模糊质感更贴近.menu材质,同时使用.behindWindow混合模式匹配锁屏的层级表现:visualEffectView.material = .menu visualEffectView.state = .active visualEffectView.blendingMode = .behindWindow给文字添加阴影效果
锁屏文字带有深色外阴影提升辨识度,给NSTextField的layer添加阴影配置:label.layer?.shadowColor = NSColor.black.cgColor label.layer?.shadowOffset = CGSize(width: 0, height: 1) label.layer?.shadowOpacity = 0.8 label.layer?.shadowRadius = 2可选优化:使用轻量文本控件
可以将NSTextField替换为更适合静态文本展示的NSTextField(labelWithString:)初始化方式,效果一致。
完整修改后的代码:
let visualEffectView = NSVisualEffectView(frame: view.bounds) visualEffectView.material = .menu visualEffectView.state = .active visualEffectView.blendingMode = .behindWindow visualEffectView.wantsLayer = true view.addSubview(visualEffectView) let label = NSTextField(labelWithString: "Hello, World!") label.frame = visualEffectView.bounds label.isEditable = false label.isBordered = false label.backgroundColor = NSColor.clear label.textColor = NSColor.white label.font = NSFont.boldSystemFont(ofSize: 80) label.wantsLayer = true // 添加文字阴影 label.layer?.shadowColor = NSColor.black.cgColor label.layer?.shadowOffset = CGSize(width: 0, height: 1) label.layer?.shadowOpacity = 0.8 label.layer?.shadowRadius = 2 visualEffectView.addSubview(label)
这样修改后,文字会带有锁屏风格的深色阴影,视觉效果视图的模糊质感也更贴近系统锁屏样式。
内容的提问来源于stack exchange,提问作者MengXianLiang
相关产品推荐
相关产品推荐

