【iOS】SwiftUI 滚动 (scroll)

ScrollView

当 HStack 或 VStack 中的内容超出屏幕范围时，需要实现滚动操作 (scroll) 来浏览全部的内容。但是 Stack 并没有实现滚动机制，需要使用 ScrollView 来包裹 Stack 实现滚动操作。

比如实现一个水平滚动的 Stack，包含 5 个 ProfileView：

ScrollView(.horizontal) {
    HStack {
        ProfileView()
        ProfileView()
        ProfileView()
        ProfileView()
        ProfileView()
    }
}
.frame(maxWidth: 500)

通常使用 ForEach 来生成一系列视图：

ScrollView(.horizontal) {
    HStack {
        ForEach(profiles) { profile in
            ProfileView(profile: profile)
        }
    }
}
.frame(maxWidth: 500)

LazyStack

使用 ScrollView 和 Stack 展示大量数据时，需要显示时 Stack 会将所有数据一次性加载到内存，当数据很多时可能造成性能问题。可以使用 LazyStack 代替 Stack 实现按需加载，从而减少资源占用、提高性能。

比如用 LazyHStack 代替上面的 HStack：

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(profiles) { profile in
            ProfileView(profile: profile)
        }
    }
}
.frame(maxWidth: 500)

但这并不是说 LazyStack 是全面超越 Stack 的更好替代品，二者的差异体现了性能和正确性的权衡。Stack 一次性加载所有子视图，可以更快、更准确的计算布局；而 LazyStack 只有在子视图可见时才计算其大小、布局，可能造成布局的错误。

当使用 Stack 进行布局时，永远先使用普通的 Stack，如果确实出现了性能问题，而且 LazyStack 能够比较显著地改善这个问题，再改用 LazyStack，否则使用 Stack 就是最好的。

Instruments

如果想要分析 Stack 和 LazyStack 的性能区别，比如加载时间、内存占用等，需要使用官方的性能剖析工具 Instruments。

在 Xcode 中点击菜单栏的 Product -> Profile，或使用快捷键 Command + i，打开 Instruments。

选择 SwiftUI 模板，可以分析视图加载的时间、子视图数量等。（需要使用真机进行剖析，不能用模拟器）