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)
        }
    }
}