如何检测SwiftUI List滚动到底部？适配ForEach方案求助

问题根源分析 #

你之前的方案失效，核心原因是把GeometryReader作为ForEach的背景，导致每个列表元素都会触发PreferenceKey，不仅数值累加错误，还会给所有元素添加上背景色。另外用VStack包裹会破坏ScrollViewReader的scrollTo定位，因为VStack会改变元素的层级结构。

可行解决方案 #

我们可以把底部检测逻辑独立出来，作为List的最后一个元素，既不会干扰原有列表项的id定位，也能精准检测滚动到底部的状态：

1. 修正PreferenceKey的数值处理逻辑

原来的累加逻辑会导致多个元素触发时数值混乱，我们需要保留最新的（即底部检测视图的）偏移值：

struct ViewOffsetKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue = CGFloat.zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        // 替换为最新的偏移值，而非累加
        value = nextValue()
    }
}

2. 重构List的布局逻辑

移除ForEach上的背景和偏好监听，添加一个独立的底部检测视图，仅让这个视图负责滚动位置检测：

let spaceName = "scroll"
@State var wholeSize: CGSize = .zero
@Query var messages: [Message]
// 可选：动态获取导航栏高度，替代硬编码
@State private var navBarHeight: CGFloat = 0

var body: some View {
    ScrollViewReader { scrollView in
        ChildSizeReader($wholeSize) {
            List {
                ForEach(messages.indices, id: \.self) { index in
                    let message = messages[index]
                    messageView(for: message, at: index)
                        .id(message.id) // 保留原id，不影响scrollTo功能
                }
                // 底部检测视图：仅占1pt高度，不影响布局
                GeometryReader { proxy in
                    Color.clear
                        .preference(
                            key: ViewOffsetKey.self,
                            value: proxy.frame(in: .named(spaceName)).origin.y
                        )
                }
                .frame(height: 1)
            }
            .coordinateSpace(name: spaceName)
            .onPreferenceChange(ViewOffsetKey.self) { offset in
                // 计算阈值：当底部视图的顶部进入List可视区域时，判定为到达底部
                // 减去10是为了添加一点提前检测的余量，可根据需求调整
                let bottomThreshold = wholeSize.height - 10
                if offset <= bottomThreshold {
                    print("已滚动到List底部")
                } else {
                    print("未到达底部 | 当前偏移：\(offset) | 阈值：\(bottomThreshold)")
                }
            }
        }
        // 可选：动态获取导航栏高度（如果需要用到）
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("消息列表")
                    .background(
                        GeometryReader { proxy in
                            Color.clear.onAppear {
                                navBarHeight = proxy.frame(in: .global).maxY
                            }
                        }
                    )
            }
        }
    }
}

3. 保留原有ChildSizeReader

你的ChildSizeReader可以继续使用，它负责获取List的可视区域尺寸，用于计算滚动阈值。

方案优势 #

• 完全保留ScrollViewReader的scrollTo功能，因为没有改变原有列表项的层级结构
• 仅通过一个独立视图检测滚动状态，不会干扰列表元素的渲染
• 避免硬编码导航栏高度，可通过动态方式获取适配不同设备

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