【iOS】SwiftUI 滚动 (scroll)

ScrollView

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

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

ScrollView(.horizontal) {
    HStack {
        ProfileView()
        ProfileView()
        ProfileView()
        ProfileView()
        ProfileView()
    }
}
.frame(maxWidth: 500)
【iOS】SwiftUI 滚动 (scroll)

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

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

LazyStack

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

【iOS】SwiftUI 滚动 (scroll)

比如用 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。

【iOS】SwiftUI 滚动 (scroll)

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

上一篇:Vue 监听某个元素滚动,亲测有效


下一篇:ScrollView高度不能充满全屏