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 模板,可以分析视图加载的时间、子视图数量等。(需要使用真机进行剖析,不能用模拟器)