SwiftUI中LazyGridView如何检测并处理项目溢出屏幕问题？

我有一个网格列表，其中每个列表项可以展开高度。我希望在项展开时自动滚动，以避免其溢出屏幕。

我通过以下代码实现了需求，但用了临时的hack方案：在点击展开后延迟0.1秒再判断是否需要滚动。原因是视图展开时，GeometryReader的更新会晚于调度器执行的自动滚动判断逻辑，导致直接判断的话拿不到最新的位置信息。

想了解正确的实现方式是什么？

（蓝色的项表示已溢出屏幕）

原实现代码 #

import SwiftUI

struct BlocksGridView: View {
    
    private var gridItemLayout = [GridItem(.adaptive(minimum: 300, maximum: .infinity), spacing: 20)]
    
    
    var body: some View {
        ZStack{
            ScrollView {
                ScrollViewReader { value in
                    LazyVGrid(columns: gridItemLayout, spacing: 20) {
                        ForEach((0..<20), id: \.self) {
                            BlockView(cardID: $0,scrollReader: value).id($0)
                        }
                    }
                }
                .padding(20)
            }
        }
    }
}

struct BlockView : View {
    
    var cardID : Int
    var scrollReader : ScrollViewProxy
    
    @State private var isOverflowingScreen = false
    @State private var expand = false
    
    var body: some View {
        ZStack{
            Rectangle()
                .foregroundColor(isOverflowingScreen ? Color.blue : Color.green)
                .frame(height: expand ? 300 : 135)
                .clipShape(Rectangle()).cornerRadius(14)
                .overlay(Text(cardID.description))
                .background(GeometryReader { geo -> Color in
                    DispatchQueue.main.async {
                        if geo.frame(in: .global).maxY > UIScreen.main.bounds.maxY {
                            isOverflowingScreen = true
                        } else {
                            isOverflowingScreen = false
                        }
                    }
                    return Color.clear
                })
                .onTapGesture {
                    expand.toggle()
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { // <-- Hack :(
                        if isOverflowingScreen {
                            withAnimation{
                                scrollReader.scrollTo(cardID)
                            }
                        }
                    }
                }
        }
    }
}


struct BlocksGridView_Previews: PreviewProvider {
    static var previews: some View {
        BlocksGridView()
    }
}

正确实现方式 #

核心思路是利用视图更新的时机，在GeometryReader获取到最新布局信息后再触发滚动，避免依赖固定延迟的hack。以下是两种可靠的优化方案：

方案一：布局回调内直接处理滚动 #

把滚动逻辑移到GeometryReader的回调中，结合expand状态判断，确保只有在展开时才执行滚动操作：

struct BlockView : View {
    var cardID : Int
    var scrollReader : ScrollViewProxy
    
    @State private var expand = false
    
    var body: some View {
        ZStack{
            Rectangle()
                .foregroundColor(.green)
                .frame(height: expand ? 300 : 135)
                .clipShape(RoundedRectangle(cornerRadius: 14))
                .overlay(Text(cardID.description))
                .background(GeometryReader { geo -> Color in
                    DispatchQueue.main.async {
                        // 判断当前项是否溢出屏幕
                        let isOverflowing = geo.frame(in: .global).maxY > UIScreen.main.bounds.maxY
                        // 仅在展开且溢出时触发滚动
                        if expand && isOverflowing {
                            withAnimation {
                                scrollReader.scrollTo(cardID, anchor: .top)
                            }
                        }
                    }
                    return Color.clear
                })
                .onTapGesture {
                    expand.toggle()
                }
        }
    }
}

方案二：结合状态监听与布局更新 #

通过onChange监听expand状态变化，在视图布局完成后获取最新位置并判断滚动：

struct BlockView : View {
    var cardID : Int
    var scrollReader : ScrollViewProxy
    
    @State private var expand = false
    @State private var itemFrame: CGRect = .zero
    
    var body: some View {
        ZStack{
            Rectangle()
                .foregroundColor(itemFrame.maxY > UIScreen.main.bounds.maxY ? .blue : .green)
                .frame(height: expand ? 300 : 135)
                .clipShape(RoundedRectangle(cornerRadius: 14))
                .overlay(Text(cardID.description))
                .background(GeometryReader { geo in
                    Color.clear
                        .onAppear { itemFrame = geo.frame(in: .global) }
                        .onChange(of: expand) { _ in itemFrame = geo.frame(in: .global) }
                })
                .onChange(of: expand) { newValue in
                    DispatchQueue.main.async {
                        let isOverflowing = itemFrame.maxY > UIScreen.main.bounds.maxY
                        if newValue && isOverflowing {
                            withAnimation {
                                scrollReader.scrollTo(cardID, anchor: .top)
                            }
                        }
                    }
                }
                .onTapGesture {
                    expand.toggle()
                }
        }
    }
}

关键优化点 #

1. 移除固定延迟的asyncAfter，改为依赖视图布局完成后的回调，确保拿到最新的位置信息
2. 通过scrollTo的anchor参数指定滚动位置（如.top），让溢出项完整显示在屏幕内
3. 仅在展开状态且确实溢出时触发滚动，避免不必要的滚动操作

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