iOS15+通用Snap Carousel滚动抖动问题求助

核心思路 #

过滚动时的抖动根源是偏移量超出有效范围导致实时宽度计算异常，加上ScrollView过滚动的弹性动画会触发频繁布局重计算。要兼容iOS15+，可以通过以下几点解决：

• 用ScrollViewReader跟踪滚动位置，替代iOS17+的scrollPosition
• 预计算有效滚动范围，将偏移量限制在合理区间内
• 基于当前激活项的索引而非实时偏移量计算视图尺寸，减少布局波动
• 用PreferenceKey预收集所有项的基础尺寸，避免滚动时重复计算

完整代码实现 #

import SwiftUI

// 用于收集每个项的基础尺寸
struct ItemSizePreferenceKey: PreferenceKey {
    static var defaultValue: [CGSize] = []
    static func reduce(value: inout [CGSize], nextValue: () -> [CGSize]) {
        value.append(contentsOf: nextValue())
    }
}

struct SnapCarousel<Content: View>: View {
    let itemsCount: Int
    let content: (Int) -> Content
    let focusWidthRatio: CGFloat = 0.8 // 聚焦项占父容器宽度比例
    let adjacentWidthRatio: CGFloat = 0.4 // 相邻项占父容器宽度比例
    let minItemWidth: CGFloat = 100 // 非相邻项最小宽度，防止截断
    
    @State private var activeIndex: Int = 0
    @State private var itemSizes: [CGSize] = []
    @State private var containerWidth: CGFloat = UIScreen.main.bounds.width
    
    var body: some View {
        GeometryReader { geo in
            ScrollView(.horizontal, showsIndicators: false) {
                ScrollViewReader { proxy in
                    HStack(spacing: 16) {
                        ForEach(0..<itemsCount, id: \.self) { index in
                            content(index)
                                .frame(width: itemWidth(for: index))
                                .background(
                                    GeometryReader { itemGeo in
                                        Color.clear
                                            .preference(key: ItemSizePreferenceKey.self, value: [itemGeo.size])
                                    }
                                )
                        }
                    }
                    .onPreferenceChange(ItemSizePreferenceKey.self) { sizes in
                        itemSizes = sizes
                    }
                    .onAppear {
                        containerWidth = geo.size.width
                    }
                    .onChange(of: proxy.scrollOffset) { offset in
                        // 计算当前激活的索引，限制偏移量在有效范围内
                        guard !itemSizes.isEmpty else { return }
                        let totalWidth = itemSizes.reduce(0) { $0 + $1.width + 16 } - 16
                        let clampedOffset = offset.clamped(to: 0...(totalWidth - containerWidth * focusWidthRatio))
                        
                        // 根据偏移量计算激活索引
                        let itemWidth = containerWidth * focusWidthRatio
                        let index = Int(round(clampedOffset / (itemWidth + 16)))
                        activeIndex = index.clamped(to: 0..<itemsCount)
                    }
                    .scrollTargetLayout() // iOS17+ 可选，增强snap效果，不影响iOS15兼容
                }
            }
            .scrollIndicators(.hidden)
            .animation(.easeInOut(duration: 0.3), value: activeIndex) // 平滑过渡尺寸变化
        }
    }
    
    // 根据索引计算项的宽度
    private func itemWidth(for index: Int) -> CGFloat {
        let baseFocusWidth = containerWidth * focusWidthRatio
        let adjacentWidth = containerWidth * adjacentWidthRatio
        
        switch index {
        case activeIndex:
            return baseFocusWidth
        case activeIndex - 1, activeIndex + 1:
            return adjacentWidth
        default:
            return max(minItemWidth, adjacentWidth * 0.8) // 非相邻项自适应但不小于最小宽度
        }
    }
}

// 扩展CGFloat，添加clamp方法
extension CGFloat {
    func clamped(to range: ClosedRange<CGFloat>) -> CGFloat {
        return max(range.lowerBound, min(self, range.upperBound))
    }
}

// 扩展Int，添加clamp方法
extension Int {
    func clamped(to range: Range<Int>) -> Int {
        return max(range.lowerBound, min(self, range.upperBound - 1))
    }
}

// 使用示例
struct ContentView: View {
    let items = Array(0..<10)
    
    var body: some View {
        SnapCarousel(itemsCount: items.count) { index in
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue.opacity(0.7))
                .overlay(Text("\(index)").font(.largeTitle).foregroundColor(.white))
        }
        .padding(.vertical, 40)
    }
}

关键细节说明 #

1. 偏移量限制：通过clamped(to:)将滚动偏移量限制在0到总内容宽度 - 聚焦项宽度之间，避免过滚动时的异常计算
2. 尺寸预收集：用ItemSizePreferenceKey在视图加载时收集所有项的基础尺寸，滚动时不再重复计算，减少布局触发
3. 基于索引的尺寸计算：根据activeIndex而非实时偏移量直接设置项的宽度，避免过滚动时的频繁尺寸波动
4. 平滑动画：将动画绑定到activeIndex，确保尺寸变化是平滑过渡，而非实时跟随偏移量跳变

iOS17+ 优化（可选） #

如果需要兼顾iOS17+的体验，可以添加scrollTargetBehavior(.paging)，但上述代码核心逻辑完全兼容iOS15+，无需额外修改即可运行。

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