SwiftUI中ScrollView分页与onAppear事件同步问题解决

问题根源在于LazyVStack的预加载机制——它会提前加载相邻视图，导致onAppear在视图未完全显示到当前分页区域时就触发。要实现打印与实际显示页面同步，需要结合scrollTransition的状态判断视图是否处于完全激活（显示）状态。

解决方案 #

通过监听scrollTransition的phase.isIdentity状态，仅当该状态为true时（视图完全显示在当前分页区域）执行打印操作：

import SwiftUI

struct CardItem: Identifiable {
    var id: Int
    var name: String
}

struct ContentView: View {
    let cards = [CardItem(id: 1, name: "Apple"), CardItem(id: 2, name: "Samsung"), CardItem(id: 3, name:"Google")]
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            LazyVStack {
                ForEach(cards) { card in
                    ZStack {
                        Text(card.name)
                            .zIndex(3)
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.ultraThinMaterial)
                            .containerRelativeFrame(.vertical)
                            .scrollTransition(axis: .vertical) { content, phase in
                                let scale = phase.isIdentity ? 1.0 : 0.8
                                content.scaleEffect(x: scale, y: scale)
                                    // 监听激活状态变化，仅在完全显示时打印
                                    .onChange(of: phase.isIdentity) { isActive in
                                        if isActive {
                                            print(card.name)
                                        }
                                    }
                            }
                            .zIndex(2)
                    }
                }
            }
        }
        .scrollTargetLayout()
        .contentMargins(20)
        .background(LinearGradient(colors: [.purple, .blue], startPoint: .top, endPoint: .bottom))
        .scrollTargetBehavior(.paging)
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    ContentView()
}

原理说明 #

• phase.isIdentity为true时，表示当前视图完全处于ScrollView的目标显示区域（当前分页页面）；
• 通过onChange监听该状态变化，仅当状态切换为true时执行打印，避免LazyVStack预加载导致的提前触发问题；
• 这种方式能精准匹配当前显示的分页内容，确保打印内容与实际页面同步。

内容的提问来源于stack exchange，提问作者Daryl Wong