求助：SwiftUI垂直ScrollView无法实现吸附（snap）效果的问题

问题核心原因 #

你的垂直ScrollView吸附失效，主要源于两个细节：

• containerRelativeFrame(.vertical)的相对高度计算逻辑，导致滚动系统无法精准识别每个Item的边界作为吸附目标
• scrollPosition设置的anchor: .bottom，与.viewAligned的默认对齐逻辑不匹配

解决方案 #

方案1：替换相对高度为固定计算高度（最简单有效）

将containerRelativeFrame替换为基于屏幕高度的固定计算值，同时调整锚点与吸附逻辑对齐：

struct ContentView: View {
    @State private var scrolledID: Int?
    @State private var items: [Int] = Array(0..<30)
    
    var body: some View {
        NavigationStack {
            VStack {
                if let scrolledID = scrolledID {
                    Text("scrolledID: \(scrolledID)")
                } else {
                    Text("scrolledID: none")
                }
                Text("count: \(items.count)")
                
                ScrollView(.vertical, showsIndicators: true) {
                    LazyVStack(spacing: 10) {
                        ForEach(items, id: \.self) { i in
                            RoundedRectangle(cornerRadius: 20)
                                .fill(Color.green)
                                .overlay { Text("Item \(i)") }
                                .foregroundStyle(.white)
                                // 替换为与原containerRelativeFrame逻辑一致的固定高度
                                .frame(height: UIScreen.main.bounds.height / 5 * 2)
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
                .safeAreaPadding([.vertical, .horizontal], 10)
                .scrollPosition(id: $scrolledID, anchor: .center) // 锚点改为中心对齐
                .toolbar {
                    Button("Scroll to first") {
                        scrolledID = items.first
                    }
                }
            }
        }
    }
}

方案2：自定义ScrollTargetBehavior（保留相对高度）

如果需要保留containerRelativeFrame的相对高度特性，可以通过自定义行为明确垂直方向的吸附规则：

struct ContentView: View {
    @State private var scrolledID: Int?
    @State private var items: [Int] = Array(0..<30)
    
    // 自定义垂直方向的视图对齐吸附逻辑
    private let customSnapBehavior = ScrollTargetBehavior { context in
        guard context.axis == .vertical else { return nil }
        let targetRects = context.targets.map { $0.rect }
        let visibleRect = context.visibleRect
        
        // 找到与可见区域中心最接近的目标视图
        let closestTarget = targetRects.min(by: {
            abs($0.midY - visibleRect.midY) < abs($1.midY - visibleRect.midY)
        })
        
        return closestTarget.map { target in
            ScrollTargetBehavior.Result(targetOffset: visibleRect.midY - target.midY)
        }
    }
    
    var body: some View {
        NavigationStack {
            VStack {
                if let scrolledID = scrolledID {
                    Text("scrolledID: \(scrolledID)")
                } else {
                    Text("scrolledID: none")
                }
                Text("count: \(items.count)")
                
                ScrollView(.vertical, showsIndicators: true) {
                    LazyVStack {
                        ForEach(items, id: \.self) { i in
                            RoundedRectangle(cornerRadius: 20)
                                .fill(Color.green)
                                .overlay { Text("Item \(i)") }
                                .foregroundStyle(.white)
                                .containerRelativeFrame(.vertical,
                                                        count: 5,
                                                        span: 2,
                                                        spacing: 10,
                                                        alignment: .center)
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(customSnapBehavior) // 应用自定义吸附行为
                .safeAreaPadding([.vertical, .horizontal], 10)
                .scrollPosition(id: $scrolledID, anchor: .center)
                .toolbar {
                    Button("Scroll to first") {
                        scrolledID = items.first
                    }
                }
            }
        }
    }
}

关键说明 #

• .viewAligned吸附依赖滚动目标视图的明确边界，相对高度视图在部分场景下无法被滚动系统正确识别，固定高度或自定义行为可解决该问题
• scrollPosition的锚点需与吸附对齐方向匹配，比如.center对应视图中心对齐吸附

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