问题描述
我正在使用macOS软件,发现在swiftui中滚动视图设置为.horizontal
,所以当鼠标滚轮滚动时列表不会滚动,但是在.vertical
中滚动模式。
但是我真的需要此功能。
因此,我尝试了一个选项:实现NSViewRepresentable
,使NSView覆盖scrollWheel
方法可以处理鼠标滚轮滚动事件。然后发布通知。
struct MouseWheelScrollEventView : NSViewRepresentable {
class MouseView : NSView {
override var acceptsFirstResponder: Bool {
true
}
override func acceptsFirstMouse(for event: NSEvent?) -> Bool {
return true
}
override func scrollWheel(with event: NSEvent) {
NotificationCenter.default.post(name: Notification.Name("mouseevent"),object: event)
}
}
func makeNSView(context: Context) -> some NSView {
let view = MouseView()
dispatchQueue.main.async {
view.window?.makeFirstResponder(view)
}
return view
}
func updateNSView(_ nsView: NSViewType,context: Context) {
print("update")
}
}
然后在SwiftUI中,如下代码:
@available(OSX 11.0,*)
struct ContentView: View {
let mouseWheelScrollEventPublisher = NotificationCenter.default.publisher(for: Notification.Name(rawValue: "mouseevent"))
@State var deltaY = 0.0
@State var currentIndex = 1
var body: some View{
ZStack{
ScrollView(.horizontal,showsIndicators:false) {
ScrollViewReader { value in
LazyHStack(alignment: .top) {
ForEach(1...100,id: \.self) { index in
if(self.currentIndex == index) {
Text("\(String(index))")
.frame(width: 80,height: 80)
.background(Color.yellow)
.onTapGesture(perform: {
print(index)
})
}else {
Text("\(String(index))")
.frame(width: 80,height: 80)
.background(Color.blue)
.onTapGesture(perform: {
print(index)
})
}
}
}
.onReceive(mouseWheelScrollEventPublisher) { output in
let event = output.object as! NSEvent
let deltaY = event.deltaY
if(deltaY < 0 && self.currentIndex < 100) {
self.currentIndex += 1
value.scrollTo(currentIndex)
}else if(deltaY > 0 && self.currentIndex > 1) {
self.currentIndex -= 1
value.scrollTo(currentIndex)
}
}
}
}
.frame(width: 600)
MouseWheelScrollEventView()
}
}
}
现在滚动事件可以在.horizontal
的scrollView中处理,但是有一个新的问题:scrollViewItem无法处理click事件,因为MouseWheelScrollEventView
可以处理鼠标单击事件。但是我希望scrollViewItem也可以处理鼠标单击事件。
如何处理鼠标滚轮滚动事件和单击事件?
ps:我知道使用appkit可以解决问题,但是有什么方法可以尝试使用swiftui实现?
解决方法
您可以在以下情况下简单地收听应用程序的 currentEvent
并跳过监听 NSViewRep:
- 您已经为视图设置了悬停/焦点布尔值
- 不需要 NSTrackingArea 来限制响应(例如,在瞬态弹出窗口中只有一个 ScrollView 用户希望一直与之交互)
以下是我的 macOS SwiftUI 应用程序中瞬态弹出窗口的示例。水平 ScrollView 呈现选项,可以通过缓慢或快速垂直滚动来“滚动选择”。您可以为相同的想法插入 ScrollViewProxy。
在测试实现中,使用 .onReceive() {} 会重新计算视图,并且单个鼠标滚动会重复触发。将订阅存储在 @State 变量中可以让它按需要工作。
//horizontal scroll view
.onAppear { trackScrollWheel() }
func trackScrollWheel() {
NSApp.publisher(for: \.currentEvent)
.filter { event in event?.type == .scrollWheel }
.throttle(for: .milliseconds(200),scheduler: DispatchQueue.main,latest: true)
.sink { [weak vm] event in
vm?.goBackOrForwardBy(delta: Int(event?.deltaY ?? 0))
}
.store(in: &subs)
}
@State var subs = Set<AnyCancellable>() // Cancel onDisappear