已知列表真实大小，如何解决LazyVStack滚动指示器卡顿问题？

当用LazyVStack加载大量元素时，ScrollView因无法提前获知全部内容总高度，会导致滚动指示器位置频繁跳动、卡顿。既然你已经知道列表真实总高度，可以通过以下方法在保留懒加载性能的同时，让滚动指示器保持稳定：

核心思路 #

给ScrollView提供一个固定高度的占位容器，让它一开始就明确整体滚动范围；同时让LazyVStack叠在占位容器上，依然只渲染进入视口的元素，兼顾性能与滚动条稳定性。

代码实现 #

ScrollViewReader { proxy in
    ScrollView {
        // 占位容器：高度设为你已知的列表真实总高度
        Color.clear.frame(height: totalKnownHeight)
            .overlay(
                LazyVStack {
                    ForEach(visibleCategories, id: \.self) { myCategory in
                        VStack {
                            let productsInCategory = productsByCategory[myCategory]
                            ForEach(productsInCategory, id: \.self.name) { product in
                                HStack{}
                                    .frame(width: UIScreen.main.bounds.width - 70, height: 105)
                                    .padding(.trailing, 30)
                            }
                        }
                    }
                }, alignment: .top
            )
    }
}

注意事项 #

• totalKnownHeight必须准确计算所有元素的总高度，包括分类VStack的间距、产品行的内边距等，确保和实际渲染后的总高度完全一致，否则滚动条仍会出现偏差。
• 如果后续列表元素的高度有动态变化（比如产品名称换行导致高度改变），需要重新计算并更新totalKnownHeight。

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