在 ScrollView 内的 LazyVStack 中具有可变高度的内容会导致卡顿/跳跃-解网

问：

XCode 版本 13.0 beta （13A5155e） & 针对 iOS 14 或 15

我的目标是在 SwiftUI 中创建一个聊天视图。这需要创建一个具有不同高度内容的 ScrollView。

经过大量调试，我确定如果 ScrollView 中的视图没有固定高度，则当您滚动到视图顶部时，它会卡顿。

––––

struct Message: Identifiable {
  let id = UUID()
  var text: String
}

struct ContentView: View {
  @State var items: [Message] = MockData.randomMessages(count: 100)
  
  var body: some View {
    VStack {
      Button("Shuffle items") {
        items = MockData.randomMessages(count: 100)
      }
      ScrollView {
        LazyVStack(spacing: 10) {
          ForEach(items) { item in
            Text(item.text)
              .background(colors.randomElement()!)
          }
        }
      }
    }
  }
}

我现在的结论是，它只适用于具有固定高度的子视图。仅此问题就阻止了 SwiftUI 为生产做好准备。LazyVStack

有没有人解决这个问题？

APPLE 的回应（2021 年 7 月 27 日）：

“在您的 Mac 目标上，这一切都有效，但我看到 iOS 上存在滚动问题。这个问题绝对是 iOS 上 SwiftUI 的错误。我建议不要重写您的应用程序，而是将 UIViewRepresentable 用于 UIScrollView（或者实际上 UITable / UICollection View 在这里最有意义）。如果使用可重用的视图（如表或集合），这些问题几乎肯定会消失。你不需要重写你的应用，但如果这个问题阻止了发布，你应该添加一个 UIViewRepresentable。

iOS SwiftUI UI滚动视图

是的，这就是后备方案。这是应用程序的主要视图之一 - 聊天视图。在 UIKit 中重写整个过程将是一项艰巨的任务，但我希望 SwiftUI 能够实现它。从字面上看，这是阻止它的唯一原因:(另一种选择是，我可以使用 a 并失去平滑过渡，使用 VStack 并且永远不会一次显示超过 30 个项目，或者在 UIKit 中重写它。我可能会先重新审视这种方法。ListList

0赞 Nicolas 7/29/2021

我有几乎相同的问题，苹果的答案令人失望。如果你像我一样去做，你可能会遇到这样的情况：stackoverflow.com/questions/68383332/......--所以要尽早测试是否有泄漏。;)我仍然在我的清单上尝试使用，但物品数量有限，以避免泄漏。或尝试其他替代方法，例如.请更新您的进度！感谢分享！ListListCACollectionView

答：

-1赞 workingdog support Ukraine 7/21/2021 #1

在 macOS 12.beta、Xcode 13.beta、目标 ios 15 和 macCatalyst 上没有任何问题。在 ios15 设备和 macOS 12 上测试。我也尝试使用 10000，效果很好。也许您的问题发生在较旧的 ios 和 macos 上。您可能对被高频@StateObject更新淹没的 Swift UI 感兴趣？代码在 iOS14 上挣扎，但在 iOS15 上却没有。

您可以尝试其他方法来查看是否可以提高性能，例如：

 ForEach(items.indices, id: \.self) { index in
     Text(items[index]).background(colors.randomElement()!)
 }

或

 ForEach(Array(items.enumerated()), id: \.0) { index, item in
     Text(item).background(colors.randomElement()!)
 }

ScrollView {
  VStack(spacing: 10) {
    ForEach(items.prefix(10)) { item in
      Text(item.text)
        .background(colors.randomElement()!)
      }
    }

    LazyVStack(spacing: 10) {
      ForEach(items.dropFirst(10)) { item in
        Text(item.text)
          .background(colors.randomElement()!)
        }
      }
    }
  }
}

在 ScrollView 内的 LazyVStack 中具有可变高度的内容会导致卡顿/跳跃

Content with variable height in a LazyVStack inside a ScrollView causes stuttering / jumping

评论

评论

评论