ScrollView内LazyVStack含可变高度子视图时滚动卡顿跳帧问题求助

开发环境 #

XCode Version 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()!)
          }
        }
      }
    }
  }
}

问题疑问 #

当前测试得出结论：LazyVStack仅支持固定高度的子视图，该问题直接导致SwiftUI无法满足生产环境使用要求。询问是否有其他开发者遇到过同类问题，是否有可行的解决方案。

官方答复与解决方案 #

苹果官方2021年7月27日明确答复：

该功能在Mac端目标运行版本下完全正常，但iOS端确实存在滚动问题，属于iOS端SwiftUI的明确bug。无需重写整个应用，可通过UIViewRepresentable封装UIScrollView使用，更推荐使用UITableView或UICollectionView，这类可复用视图几乎可以完全解决该问题。如果该问题阻塞应用发布，仅需添加对应的UIViewRepresentable封装即可。

可行落地方案：

• 优先选择封装UITableView/UICollectionView：原生UIKit组件的动态高度计算和Cell复用逻辑已经过长期迭代优化，性能稳定，滚动流畅度能完全达到生产环境要求。
• 若不想引入过重的UIKit封装，可选择封装UIScrollView替代原生SwiftUI ScrollView，改造成本最低，适合业务逻辑已经成型需要快速修复上线的项目。

内容的提问来源于stack exchange，提问作者chrysb