SwiftUI滚动修改视图修饰符scrollTransition

在 SwiftUI 中，scrollTransition 是一个修饰符，用于基于滚动位置动态修改视图的外观或行为。这为创建更加动态和交互式的滚动内容提供了强大的工具。

基本语法

Transition(_ configuration: ScrollTransitionConfiguration = .interactive, axis: Axis? = nil, transition: @escaping @Sendable (EmptyVisualEffect, ScrollTransitionPhase)

参数

effect: 定义滚动时应用的效果。

axis: 指定滚动效果的方向，可以是 .vertical 或 .horizontal，默认是 .vertical。

示例代码

基础示例：调整缩放

以下代码展示了如何根据滚动位置动态调整视图的缩放效果：

struct ContentView: View {
    var color: [Color] = [.red,.green,.yellow,.orange,.purple,.mint]
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<20) { index in
                    Text("Item \(index)")
                        .font(.largeTitle)
                        .padding()
                        .background(color[index % 6])
                        .cornerRadius(10)
                        .scrollTransition { content, phase in
                            content.scaleEffect(phase.isIdentity ? 1.0 : 0.8)
                        }
                }
            }
            .padding()
        }
    }
}

phase 参数详解

phase 是 ScrollTransitionPhase 类型的实例，表示视图当前所处的滚动状态。可以通过以下属性判断状态：

isIdentity: 当前视图是否在默认位置。

实际案例

设置ScrollImage视图显示图片并在scrollTransition，在ContentView视图中使用ScrollView显示图片。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        ScrollView {
            ScrollImage("apollo1")
            ScrollImage("apollo7")
            ScrollImage("apollo8")
            ScrollImage("apollo9")
            ScrollImage("apollo10")
            ScrollImage("apollo11")
        }
    }
}

struct ScrollImage: View {
    var imageName: String
    init(_ imageName: String) {
        self.imageName = imageName
    }
    var body: some View {
        Image(imageName)
            .resizable()
            .scaledToFit()
            .clipShape(.rect(cornerRadius: 20))
            .scrollTransition { content, phase in
                content
                    .scaleEffect(phase.isIdentity ? 1: 0.5)
                    .opacity(phase.isIdentity ? 1: 0.5)
            }
    }
}

注意事项

1、性能: 使用复杂的滚动效果时，注意性能影响，尤其是在列表中包含大量动态效果时。

2、交互性: 滚动效果不应影响视图的可交互性，例如按钮或手势。

3、兼容性: scrollTransition 需要运行在支持的 iOS/macOS 版本（iOS 17/macOS 14 及更高版本）。

通过 scrollTransition，可以轻松创建动态、直观的滚动体验，同时提升界面的视觉吸引力。