SwiftUI：包含不同高度项目的 LazyVStack 不适用于 ScrollView (macOS)

Question

问题

当我用不同高度的项目填充LazyVStack时，它周围的ScrollView在 macOS 13 上的行为不符合预期。这个简化的示例仍然有点用，但正如您在屏幕录制中看到的那样（我滚动得非常慢），滚动位置跳来跳去。 在我的生产应用程序中，这种行为变得更糟，有时无法再次向上滚动。

代码

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1...40, id: \.self) { value in
                    Item(value: value)
                        .id(value)
                        .padding()
                }
            }
            .padding()
        }
        .frame(width: 300, height: 300)
    }
}

struct Item: View {
    let value: Int
    let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    var body: some View {
        if value < 20 {
            Text("\(value) A long text: \(lorem)")
        }
        else {
            Text("\(value) A short text")
        }
    }
}

iOS 与 macOS

我在 iOS 上发现了这篇关于相同问题的帖子。 我也在 iOS 上运行我的代码，当滚动指示器改变它的高度（这将表明内容大小发生变化）时，滚动是平滑的，没有滚动位置的跳跃。

题

有没有人遇到同样的问题并找到了使这项工作有效的方法？ 该示例可以很容易地使用常规VStack ，但出于性能原因和添加粘性标头的能力，我需要使用LazyVStack 。

Answer 1

据我所知，这似乎仍然是一个错误。

我能够组合出一个不会跳来跳去的解决方案，但您可能需要调整内容以使其间隔正确。 我用负填充做了一个快速调整，但需要做更多的工作才能让它像以前一样设计。

我认为问题来自应用于您的ScrollView的frame 。 出于某种原因，LazyVStack 不喜欢这样。 尝试只删除 ScrollView 上的框架 - 跳跃消失了。

看起来您可以将框架应用于Item视图并防止它跳转。 下面的例子：

struct ContentView: View {
var body: some View {
    ScrollView {
        LazyVStack {
            ForEach(1...40, id: \.self) { value in
                Item(value: value)
                    .id(value)
                    .padding(.bottom, -100)
            }
        }
    }
    .frame(width: 300, height: 300)
  }
}

struct Item: View {
    let value: Int
    let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    
    var body: some View {
        Group {
            if value < 20 {
                Text("\(value) A long text: \(lorem)")
            }
            else {
                Text("\(value) A short text")
            }
        }
        .frame(width: 300, height: 300)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

struct ContentView: View {
    var body: some View {
        ScrollView {
            ScrollView {
                LazyVStack {
                    ForEach(1...40, id: \.self) { value in
                        Item(value: value)
                            .id(value)
                            .padding()
                    }
                }
                .padding()
            }
            .frame(width: 300, height: 300)
        }
    }
}