如何获取屏幕当前元素 解决ScrollViewReader滚动索引失效问题

当前实现仅做了gridIndex到滚动位置的单向绑定：只有修改gridIndex时才会触发编程式滚动，但用户手动拖拽ScrollView时，没有任何逻辑同步更新gridIndex的值，导致ViewModel中存储的索引和屏幕实际显示的元素位置脱节，后续点击按钮触发滚动时，会基于错误的索引计算目标位置，功能自然失效。

核心是补全滚动位置到gridIndex的反向同步逻辑，优先用PreferenceKey实现无侵入的位置监听，不需要重构现有代码。 #

步骤1：定义位置偏好读取器 #

新增一个PreferenceKey，用来收集当前可见区域内的元素索引：

struct VisibleRowIndexKey: PreferenceKey {
    static var defaultValue: Int = 0
    static func reduce(value: inout Int, nextValue: () -> Int) {
        // 始终取最小索引，即视口最顶部/最左侧的可见元素
        value = min(value, nextValue())
    }
}

步骤2：给ScrollView和子元素加位置监听 #

首先给ScrollView命名坐标空间，用于计算元素相对位置，然后在每个Row上添加几何读取器，判断元素是否处于可见区域：

// 给ScrollView加坐标空间命名
ScrollView([.horizontal, .vertical]) {
    ScrollViewReader { proxy in
        Section(header: HeaderView(screenSize: $screenSize).border(Color("ApplicationTint"), width: 4)) {
            ForEach(Elements.indices) { index in
                Row(screenSize: $screenSize, elements: Elements[index])
                    .id(index)
                    .background(
                        GeometryReader { geo in
                            Color.clear
                                .preference(
                                    key: VisibleRowIndexKey.self,
                                    // 元素和视口相交就返回自身索引，否则返回极大值不参与最小值计算
                                    value: geo.frame(in: .named("gridScroll")).intersects(CGRect(origin: .zero, size: screenSize)) ? index : Int.max
                                )
                        }
                    )
                Divider()
            }
        }
        .onChange(of: viewModel.gridIndex) { value in
            // 标记当前是编程触发的滚动，避免回传同步冲突
            viewModel.isProgrammaticScrolling = true
            withAnimation(.spring()) {
                proxy.scrollTo(value, anchor: .leading)
            }
            // 动画结束后重置标记，时长和spring动画时长对齐即可
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                viewModel.isProgrammaticScrolling = false
            }
        }
    }
}
.coordinateSpace(name: "gridScroll")
// 监听可见元素变化，手动滚动时同步更新gridIndex
.onPreferenceChange(VisibleRowIndexKey.self) { topVisibleIndex in
    guard !viewModel.isProgrammaticScrolling else { return }
    viewModel.gridIndex = topVisibleIndex
}

步骤3：调整ViewModel和按钮逻辑 #

首先在ViewModel中新增滚动状态标记，避免双向绑定冲突：

// 新增属性
var isProgrammaticScrolling: Bool = false

然后修改按钮的步进逻辑，匹配每次滚动3个元素的需求，同时加上边界判断防止越界：

// 滚动到顶部
Button {
    viewModel.gridIndex = 0
} label: {
    Image(systemName: "arrow.up.to.line")
}

// 向上滚动3个元素
Button {
    viewModel.gridIndex = max(0, viewModel.gridIndex - 3)
} label: {
    Image(systemName: "arrow.up")
}

// 向下滚动3个元素
Button {
    viewModel.gridIndex = min(viewModel.totalgridIndex, viewModel.gridIndex + 3)
} label: {
    Image(systemName: "arrow.down")
}

// 滚动到底部
Button {
    viewModel.gridIndex = viewModel.totalgridIndex
} label: {
    Image(systemName: "arrow.down.to.line")
}

• 如果你的GridView以垂直方向滚动为主，把scrollTo的anchor改成.top即可，双向滚动可以根据实际交互需求调整锚点位置
• 动画时长可以根据自己的UI效果调整，只要保证isProgrammaticScrolling标记在动画结束后重置就行，避免出现滚动过程中索引错乱
• ScrollViewReader本身不提供读取当前滚动位置的API，不要尝试直接通过proxy获取当前偏移，通过GeometryReader+PreferenceKey是目前SwiftUI中获取可见元素最稳定的方案

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