SwiftUI 中掌握 ScrollView 的使用：滚动可见性

前言

我们的滚动 API 中又有一个重要的新增功能：滚动可见性。现在，你可以获取可见标识符列表，或者快速检查并监控 ScrollView 内视图的可见性状态。本周，我们将学习如何使用新的 onScrollTargetVisibilityChange 和 onScrollVisibilityChange 视图修饰符。

视图修饰符

让我们先从 onScrollTargetVisibilityChange 视图修饰符开始。它设计得易于使用，允许你将其附加到具有滚动目标布局的任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符的使用。

struct ContentView: View {
    @State private var visible: [Int] = []
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1..<100, id: \.self) { item in
                    Text(verbatim: item.formatted())
                }
            }
            .scrollTargetLayout()
        }
        .onScrollTargetVisibilityChange(idType: Int.self) { identifiers in
            visible = identifiers
        }
        .onChange(of: visible) {
            print(visible)
        }
    }
}

如上例所示，我们在懒加载栈（LazyVStack）上使用 scrollTargetLayout 视图修饰符，以便允许 ScrollView 针对栈的子视图进行目标识别，而不是针对栈本身。

要了解有关 scrollTargetLayout 视图修饰符的更多信息，请查看我的文章《掌握 SwiftUI 中的 ScrollView：滚动几何》。

应用场景

我们还将 onScrollTargetVisibilityChange 视图修饰符附加到 ScrollView 上，提供标识符类型和操作闭包。在操作闭包内，我们获取可见标识符列表，并可以对可见项执行所需的操作。

有时，视图需要在其可见性状态在 ScrollView 中发生变化时进行响应。对于这些情况，SwiftUI 框架引入了 onScrollVisibilityChange 视图修饰符，你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。

struct VideoPlayerView: View {
    let url: URL
    
    @State var player: AVPlayer?
    
    var body: some View {
        VideoPlayer(player: player)
            .task {
                if player == nil {
                    player = AVPlayer(url: url)
                }
            }
            .onScrollVisibilityChange { isVisible in
                if isVisible {
                    player?.play()
                } else {
                    player?.pause()
                }
            }
    }
}

上例定义了 VideoPlayerView 视图，该视图在其可见时自动播放视频内容。正如你所见，我们将 onScrollVisibilityChange 视图修饰符附加到视图本身，并提供一个操作闭包。我们在操作闭包内获得可见性参数，并可以对其变化进行响应。

可见性

onScrollVisibilityChange 和 onScrollTargetVisibilityChange 修饰符都具有 threshold 参数。threshold 参数允许我们调整需要可见的视口部分的数量，以触发操作闭包。默认情况下，SwiftUI 框架使用 0.5 作为阈值，这意味着至少 50% 的视图需要可见，SwiftUI 才会运行操作。但你可以轻松调整此值。

struct VideoPlayerView: View {
    let url: URL
    
    @State var player: AVPlayer?
    
    var body: some View {
        VideoPlayer(player: player)
            .task {
                if player == nil {
                    player = AVPlayer(url: url)
                }
            }
            .onScrollVisibilityChange(threshold: 0.1) { isVisible in
                if isVisible {
                    player?.play()
                } else {
                    player?.pause()
                }
            }
    }
}

在上述示例中，我们定义了阈值，这意味着 SwiftUI 将在视图至少有 10% 可见时运行操作闭包。同样，当视图从可见状态转换为不可见状态，即显示的视口部分少于 10% 时，也会运行该闭包。

完整示例

上面对视图修饰符有了初步了解，它的设计得易于使用，允许你将其附加到具有滚动目标布局的任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符的使用。

示例代码如下：

import SwiftUI
import AVKit

struct ContentView: View {
    @State private var visible: [Int] = []
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1..<100, id: \.self) { item in
                    Text(verbatim: item.formatted())
                        .frame(width: 100, height: 100)
                        .background(item % 2 == 0 ? Color.blue : Color.red)
                        .cornerRadius(10)
                        .padding(5)
                }
            }
            .scrollTargetLayout()
        }
        .onScrollTargetVisibilityChange(idType: Int.self) { identifiers in
            visible = identifiers
        }
        .onChange(of: visible) { newVisible in
            print("Visible items: \(newVisible)")
        }
        .navigationTitle("ScrollView Demo")
    }
}

struct VideoPlayerView: View {
    let url: URL
    
    @State var player: AVPlayer?
    
    var body: some View {
        VideoPlayer(player: player)
            .frame(height: 200)
            .task {
                if player == nil {
                    player = AVPlayer(url: url)
                }
            }
            .onScrollVisibilityChange { isVisible in
                if isVisible {
                    player?.play()
                } else {
                    player?.pause()
                }
            }
    }
}

@main
struct ScrollViewVisibilityApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                VStack {
                    ContentView()
                    Spacer()
                    VideoPlayerView(url: URL(string: "https://www.example.com/video.mp4")!)
                        .padding()
                }
            }
        }
    }
}

这个示例 Demo 展示了如何使用 onScrollTargetVisibilityChange 和 onScrollVisibilityChange 视图修饰符来跟踪 ScrollView 中的视图可见性。整个示例分为两个部分：一个是显示带有多个文本视图的 ScrollView，另一个是显示一个视频播放器视图。

ContentView

1. ScrollView 和 LazyVStack：使用 ScrollView 包裹一个 LazyVStack，在其中放置 1 到 99 的数字。每个数字都显示在一个 Text 视图中，并有不同的背景颜色。
2. scrollTargetLayout：在 LazyVStack 上应用 scrollTargetLayout 视图修饰符，以允许 ScrollView 针对栈的子视图进行目标识别。
3. onScrollTargetVisibilityChange：在 ScrollView 上应用 onScrollTargetVisibilityChange 视图修饰符，并提供标识符类型和操作闭包。在操作闭包内，获取可见标识符列表并赋值给 visible 状态变量。
4. onChange：监听 visible 状态变量的变化，并打印当前可见的项。

VideoPlayerView

1. VideoPlayer：定义一个视频播放器视图，使用 AVPlayer 播放视频。
2. task：在 task 修饰符中初始化播放器。
3. onScrollVisibilityChange：在视频播放器视图上应用 onScrollVisibilityChange 视图修饰符，并提供一个操作闭包。在操作闭包内，根据可见性状态来播放或暂停视频。

ScrollViewVisibilityApp

1. 主应用入口：定义主应用入口 ScrollViewVisibilityApp，将 ContentView 和 VideoPlayerView 组合到一个垂直堆栈中，并通过 NavigationView 进行导航。

运行这个 Demo，你会看到一个带有多个文本视图的 ScrollView，当你滚动时，控制台会打印当前可见的项。此外，在页面底部有一个视频播放器，当视频播放器出现在视口内时，它会自动播放，当其离开视口时，会自动暂停。

总结

今天，我们学习了如何跟踪 ScrollView 内特定视图的可见性，并监控可见标识符列表。示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。