ios - macOS 上的 SwiftUI 嵌套 ScrollView 问题

Question

(如果有苹果人看到这个 - 我提交了反馈:FB8910881)
我正在尝试构建一个 SwiftUI 应用程序，其布局类似于 Apple Music 应用程序 - Artist Page 或 Apple 的 SwiftUI 教程 (Landmarks app) 中的类似内容。在应用程序内，您可以在列表项上垂直滚动，也可以在所有行上水平滚动。

在我的应用程序中，我有一个 ScrollView 内的行列表(垂直的)。行本身垂直滚动并包含 ScrollView和 LazyHGrid .它适用于 iOS，但不适用于 macOS。
在 iOS 上，我可以垂直滚动列表并水平滚动行项目 - 在模拟器中单击并拖动以在应用程序内滚动 - 就像一个魅力。

在 macOS 但是，如果我没有超过一行，我只能垂直滚动......我通过魔术鼠标向上/向下/向左/向右滚动。该行的 Scrollview 似乎捕捉到了垂直滚动...在 Apple Music 应用程序中，如果您越过 Artist Playlist 行，您可以上下左右滚动。
Xcode 12.2 和 Xcode 12.3 测试版，macOS BigSur 11.0.1


这是我的代码:

import SwiftUI

struct ScrollViewProblem: View {

    var body: some View {
        ScrollView {
            HStack {
                Text("Scrolling Problem")
                    .font(.largeTitle)
                Spacer()
            }.padding()

            ScrollRow()
            ScrollRow()
            ScrollRow()
            ScrollRow()
        }
    }
}

struct ScrollRow: View {

    let row = [
        GridItem(.flexible(minimum: 200))
    ]

    var body: some View {

        VStack {
            HStack {
                Text("Row")
                    .font(.largeTitle)
                Spacer()
            }
            ScrollView(.horizontal) {
                LazyHGrid(rows: row, spacing: 20) {
                    ForEach(1..<7) { index in
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 200, height: 200)
                    }
                }
            }
        }
        .padding()
    }
}

struct ScrollViewProblem_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewProblem()
    }
}

Answer 1

我已经找到了解决该错误的方法，尽管我希望 Apple 能尽快解决它。
据我所知，根本问题是鼠标滚轮滚动事件没有从内部水平 ScrollView 转发到外部垂直 ScrollView 。
令人沮丧的是有 AppKit完全适用于该场景的方法:指定滚动事件是否应向上转发到响应者链。它被称为 wantsForwardedScrollEvents并且记录在案here in the Apple documentation .即使文档说它用于“弹性滚动”，this stack overflow answer展示了如何将事件向上传递到所有滚动事件的响应者链中同样有用。
所以我们需要的是:

制作 NSView覆盖 wantsForwardedScrollEvents并返回 true对于垂直滚动轴，以便垂直滚动事件从内部水平滚动传递到外部垂直滚动。

插入 NSView进入水平滚动和垂直滚动之间的 SwiftUI View 层次结构。

第二点有点棘手，但谢天谢地，真正令人惊叹的 SwiftUI Lab 博客有 a wonderful tutorial on how to do exactly that .说真的，我数不清这个博客在使用 SwiftUI 时挽救了我多少次理智。
所以最终的代码可能是这样的:

// we need this workaround only for macOS
#if os(macOS) 

// this is the NSView that implements proper `wantsForwardedScrollEvents` method
final class VerticalScrollingFixHostingView<Content>: NSHostingView<Content> where Content: View {

  override func wantsForwardedScrollEvents(for axis: NSEvent.GestureAxis) -> Bool {
    return axis == .vertical
  }
}

// this is the SwiftUI wrapper for our NSView
struct VerticalScrollingFixViewRepresentable<Content>: NSViewRepresentable where Content: View {
  
  let content: Content
  
  func makeNSView(context: Context) -> NSHostingView<Content> {
    return VerticalScrollingFixHostingView<Content>(rootView: content)
  }

  func updateNSView(_ nsView: NSHostingView<Content>, context: Context) {}

}

// this is the SwiftUI wrapper that makes it easy to insert the view 
// into the existing SwiftUI view builders structure
struct VerticalScrollingFixWrapper<Content>: View where Content : View {

  let content: () -> Content
  
  init(@ViewBuilder content: @escaping () -> Content) {
    self.content = content
  }
  
  var body: some View {
    VerticalScrollingFixViewRepresentable(content: self.content())
  }
}
#endif

准备好该结构后，我们可以在您的示例中使用它，如下所示:

import SwiftUI

// just a helper to make using nicer by keeping #if os(macOS) in one place
extension View {
  @ViewBuilder func workaroundForVerticalScrollingBugInMacOS() -> some View {
    #if os(macOS)
    VerticalScrollingFixWrapper { self }
    #else
    self
    #endif
  }
}

struct ScrollViewProblem: View {
  
  var body: some View {
    ScrollView {
      HStack {
        Text("Scrolling Problem")
          .font(.largeTitle)
        Spacer()
      }.padding()
      
      ScrollRow().workaroundForVerticalScrollingBugInMacOS()
      ScrollRow().workaroundForVerticalScrollingBugInMacOS()
      ScrollRow().workaroundForVerticalScrollingBugInMacOS()
      ScrollRow().workaroundForVerticalScrollingBugInMacOS()
    }
  }
}

在 macOS 11.0.1 和 Xcode 12.2 上验证。
[根据@marshallino16 的评论更新]
添加 NSView 后，您可能会遇到一个 SwiftUI 问题。进入您的 View 层次结构。内部 View 停止响应外部 View 状态的变化。
在此处使用示例代码中的术语:如果有 @State ScrollViewProblem 中的变量传递给 ScrollRow , ScrollRow并不总是重新计算 @State 变量更改。
"An Unpleasant Surprise" section of SwiftUI Lab blogpost 中提到了这个问题。 .
不幸的是，我还没有找到直接的解决方法来制作 @State传播再次起作用，所以目前我知道(并且一直在使用自己)的最佳工作解决方案是不通过 @State来自 ScrollViewProblem 的变量至 ScrollRow .
这意味着您需要将任何信息传递给 ScrollRow ，您必须将其封装在外部对象中( View 模型、 View 存储，无论您的架构使用什么)。然后您可以将此对象传递给 ScrollRow并让 ScrollRow保留它并将其用作 @State或 @StateObject多变的。