SwiftUI 6.0（iOS 18）监听滚动视图视口中子视图可见性的极简方法

news2024/11/15 19:58:08

在这里插入图片描述

概览

在 SwiftUI 的应用开发中，我们有时需要监听滚动视图中子视图当前的显示状态：它们现在是被滚动到可见视口（Viewport）？或仍然是隐藏在“未知的黑暗”中呢？

在这里插入图片描述

在 SwiftUI 早期版本中为了得偿所愿，我们需要借助一些“取巧”的手段。不过，从 SwiftUI 6.0（iOS 18）开始情况有了改观，我们有了针对性的解决方案。

在本篇博文中，您将学到如下内容：

概览
1. 监听滚动目标可见性的改变
2. 监听任意视图滚动可见性的改变
3. 更改滚动可见性阙值
总结

相信学完本课后，小伙伴们对于 SwiftUI 滚动视图视口可见性的监听一定会有更加浑然天成的解决之道。

那还等什么呢？让我们马上开始滚动大冒险吧！

Let‘s go！！！😉

1. 监听滚动目标可见性的改变

在以滚动目标（Scroll Target）为驱动导向的滚动视图中，我们有多种方法来监听视口中子视图可见性的“白云苍狗”。

想要了解更多 SwiftUI 滚动目标行为的知识，请小伙伴们移步如下链接观赏精彩的内容：

SwiftUI 5.0（iOS 17）滚动视图的滚动目标行为（Target Behavior）解惑和实战

不过，从 SwiftUI 6.0（iOS 18）开始一切都变的更加信手拈来了。在 WWDC 24 中苹果新增了 onScrollTargetVisibilityChange 修改器方法来专注于解决此事：

在这里插入图片描述

使用该修改器，我们可以监听滚动视图视口所有子视图可见性的实时变化情况：

struct ItemsView: View {
   
    @State private var visible: [Int] = []
    
    var body: some View {
   
        ScrollView {
   
            LazyVStack(alignment: .leading) {
   
                ForEach(1..<100, id: \.self) {
    item in
                    Text("Item \(item)")
                        .font(.largeTitle)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background {
   
                            Rectangle()
                                .foregroundStyle(.blue.gradient)
                        }
                        .