SwiftUI修改鼠标光标/指针样式
SwiftUI修改鼠标光标/指针样式

SwiftUI修改鼠标光标/指针样式

在SwiftUI中,如果想要实现鼠标悬停时,修改鼠标光标的样式,

可以使用以下几种方法实现:

一、NSCursor方法

可以调用NSCursor方法实现,当鼠标悬停时。

.onHover(perform: { isHovering in
    if isHovering {
        NSCursor.pointingHand.set()
    } else {
        NSCursor.arrow.set()
    }
})

当鼠标悬停时,显示点击手指样式,当移除时显示箭头样式。

二、cursor方法

在macOS 11+版本中,可以使用cursor():

Text("点击我")
    .cursor(.pointingHand)

这种方式最简洁,系统会自动处理hover状态和恢复,但是在Xcode 16中测试,发现cursor()无法使用,目前不知道具体原因。

之前的Xcode版本中也没有尝试过cursor,因此,仅在此做一个简单的介绍说明。

三、自定义指针样式

根据Itsuki的博客文章《SwiftUI/MacOS: Control Cursor Appearance Two Ways》,了解到可以设置指针为的NSImage图片:

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("Custom Globe Cursor")
                .padding()
                .background(RoundedRectangle(cornerRadius: 8).fill(.red))
            .onHover(perform: { isHovering in
                if isHovering {
                    guard let image =  NSImage(systemSymbolName: "globe", accessibilityDescription: nil) else {
                        return
                    }
                    let customCursor = NSCursor(image: image, hotSpot: .zero)
                    customCursor.push()
                } else {
                    NSCursor.pop()
                }
            })
        }
        .padding()
        .frame(width: 400, height: 280)
        .fixedSize()
    }
}

在这个视图中,当鼠标悬停时,会显示globe的图像。

四、pointerStyle方法

在视图中添加pointerStyle:

.pointerStyle(.default)

这个方法要求版本较高,适配平台为macOS 15.0+,visionOS 2.0+。

因此,无法在版本低的应用上使用。

参考文章

1、SwiftUI/MacOS: Control Cursor Appearance Two Ways:https://levelup.gitconnected.com/swiftui-macos-control-cursor-appearance-two-ways-8f6cd0c54efb

2、pointerStyle(_:):https://developer.apple.com/documentation/swiftui/view/pointerstyle(_:)

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注