如何为SwiftUI ScrollView实现居中吸附单元格的自定义ScrollTargetBehavior

要实现滚动停止时单元格自动吸附到视图中心的效果，你可以通过自定义ScrollTargetBehavior来完成，无需依赖UIKit。以下是完整的解决方案：

自定义滚动目标行为 #

创建一个遵循ScrollTargetBehavior的结构体，重写calculateTargetOffset方法，计算滚动停止时的目标偏移量，让单元格中心与滚动视图的可见区域中心对齐：

struct CenterAlignedScrollTargetBehavior: ScrollTargetBehavior {
    func calculateTargetOffset(
        context: ScrollTargetContext,
        proposedTargetOffset: CGPoint
    ) -> CGPoint {
        let visibleRect = context.containerSize
        
        // 找出最接近视图中心的滚动目标
        var closestTarget: ScrollTarget?
        var minDistance = CGFloat.infinity
        
        for target in context.visibleTargets {
            let targetCenterY = target.frame.midY - context.contentOffset.y
            let distance = abs(targetCenterY - visibleRect.midY)
            
            if distance < minDistance {
                minDistance = distance
                closestTarget = target
            }
        }
        
        guard let target = closestTarget else {
            return proposedTargetOffset
        }
        
        // 计算偏移量，使目标单元格中心对齐到视图中心
        let targetOffsetY = target.frame.midY - visibleRect.midY
        return CGPoint(x: proposedTargetOffset.x, y: targetOffsetY)
    }
}

使用自定义行为的示例视图 #

在你的ScrollView中应用这个自定义行为，并确保每个单元格标记为滚动目标：

struct CenterAlignedScrollViewDemo: View {
    let items = Array(1...20)
    
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack(spacing: 20) {
                ForEach(items, id: \.self) { item in
                    Text("Item \(item)")
                        .font(.title)
                        .frame(width: 200, height: 200)
                        .background(Color.blue.opacity(0.3))
                        .cornerRadius(10)
                        .scrollTargetLayout() // 标记为滚动目标
                }
            }
            .padding()
        }
        .scrollTargetBehavior(CenterAlignedScrollTargetBehavior())
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

关键说明 #

• .scrollTargetLayout()：必须给每个需要参与吸附的单元格添加这个修饰符，让SwiftUI识别它们为滚动目标。
• 自定义行为逻辑：通过遍历当前可见的滚动目标，计算每个目标中心与视图中心的距离，选择最近的目标作为最终对齐位置，确保滚动停止时单元格精准吸附到视图中心。
• 适配性：无论单元格大小是否一致，这个逻辑都能正常工作，因为它基于每个单元格的实际布局位置计算。

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