SwiftUI自定义布局嵌套ScrollView时滚动手势失效问题求助

问题场景：实现了一个流式排列（从左到右、从上到下）的自定义Layout，将文本或可交互子视图放入该布局后嵌套进ScrollView，会导致嵌套元素的滚动手势失效，尝试添加点击测试无效，且布局内子视图需要保持可交互，因此添加overlay的方案不可行。

问题原因 #

自定义Layout默认未正确实现**命中测试（Hit Testing）**逻辑，导致手势事件无法精准传递给子视图，要么被外层ScrollView拦截，要么无法识别子视图的交互区域。

解决方案 #

在自定义Layout中实现subview(for:)方法，手动判断点击点是否落在子视图的布局范围内，返回对应的子视图，确保手势事件能正确传递到目标子视图。

修改后的完整代码如下：

struct SomeView: View {
    var body: some View {
        ScrollView {
            CustomLayoutSec {
                // 现在可正常滚动
                Text("Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello")
                    .lineLimit(nil)
                // 可交互子视图正常响应
                Button(action: { print("Button tapped") }) {
                    Text("Click Me")
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
            }
        }
    }
}

struct CustomLayoutSec: Layout {
    var alignment: Alignment = .leading
    var spacing: CGFloat = 0
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxWidth = proposal.width ?? 0
        var width: CGFloat = 0
        var height: CGFloat = 0
        let rows = generateRows(maxWidth, proposal, subviews)

        for (index, row) in rows.enumerated() {
            var rowWidth = CGFloat.zero
            for (i, subview) in row.enumerated() {
                if i > 0 { rowWidth += spacing }
                rowWidth += subview.sizeThatFits(proposal).width
            }
            width = max(width, rowWidth)
            height += row.maxHeight(proposal)
            if index != rows.count - 1 { height += spacing }
        }
        return .init(width: width, height: height)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var origin = bounds.origin
        let maxWidth = bounds.width
        
        let rows = generateRows(maxWidth, proposal, subviews)
        
        for row in rows {
            let leading: CGFloat = bounds.maxX - maxWidth
            let trailing = bounds.maxX - (row.reduce(CGFloat.zero) { partialResult, view in
                let width = view.sizeThatFits(proposal).width
                return partialResult + width + (view == row.last ? 0 : spacing)
            })
            let center = (trailing + leading) / 2
            
            origin.x = alignment == .leading ? leading : alignment == .trailing ? trailing : center
            
            for view in row {
                let viewSize = view.sizeThatFits(proposal)
                view.place(at: origin, proposal: proposal)
                origin.x += viewSize.width + spacing
            }
        
            origin.y += row.maxHeight(proposal) + spacing
        }
    }
    
    // 核心：实现命中测试，传递手势事件给子视图
    func subview(for position: CGPoint, in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> LayoutSubviews.Element? {
        let maxWidth = bounds.width
        let rows = generateRows(maxWidth, proposal, subviews)
        
        var origin = bounds.origin
        for row in rows {
            let leading: CGFloat = bounds.maxX - maxWidth
            let trailing = bounds.maxX - (row.reduce(CGFloat.zero) { partialResult, view in
                let width = view.sizeThatFits(proposal).width
                return partialResult + width + (view == row.last ? 0 : spacing)
            })
            let center = (trailing + leading) / 2
            
            origin.x = alignment == .leading ? leading : alignment == .trailing ? trailing : center
            
            for view in row {
                let viewSize = view.sizeThatFits(proposal)
                let viewFrame = CGRect(origin: origin, size: viewSize)
                // 判断点击点是否在当前子视图范围内
                if viewFrame.contains(position) {
                    return view
                }
                origin.x += viewSize.width + spacing
            }
            origin.y += row.maxHeight(proposal) + spacing
        }
        return nil // 未命中子视图时，让上层视图处理事件
    }
    
    func generateRows(_ maxWidth: CGFloat, _ proposal: ProposedViewSize, _ subviews: Subviews) -> [[LayoutSubviews.Element]] {
        var row: [LayoutSubviews.Element] = []
        var rows: [[LayoutSubviews.Element]] = []
        
        var currentRowWidth: CGFloat = 0
        
        for view in subviews {
            let viewSize = view.sizeThatFits(proposal)
            let requiredWidth = currentRowWidth + viewSize.width + (currentRowWidth == 0 ? 0 : spacing)
            
            if requiredWidth > maxWidth && !row.isEmpty {
                rows.append(row)
                row.removeAll()
                currentRowWidth = viewSize.width
                row.append(view)
            } else {
                row.append(view)
                currentRowWidth += viewSize.width + (currentRowWidth == 0 ? 0 : spacing)
            }
        }

        if !row.isEmpty { rows.append(row) }
        
        return rows
    }
}

extension [LayoutSubviews.Element] {
    func maxHeight(_ proposal: ProposedViewSize) -> CGFloat {
        return self.compactMap { $0.sizeThatFits(proposal).height }.max() ?? 0
    }
}

关键说明 #

1. subview(for:)方法：作为Layout协议的可选方法，专门处理命中测试。我们在方法内重新计算每个子视图的布局位置，判断点击点是否落在子视图框架内，命中则返回对应子视图，确保手势事件精准传递。
2. 优化行宽计算：原generateRows方法使用origin.x计算存在误差，改为直接累加行宽，逻辑更准确清晰。
3. 保留子视图交互性：该方案无需添加遮挡层，完全保留子视图的交互能力，同时解决滚动手势失效问题。

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