SwiftUI中LazyVGrid搭配ScrollView的布局异常问题求解

问题描述 #

当在SwiftUI中使用LazyVGrid搭配ScrollView，并在VStack底部放置固定文本（如"Bottom Text"）时，会出现滚动内容遮挡底部文本、滚动区域超出屏幕范围的问题：

• 预期效果：底部文本正常显示，滚动区域被限制在屏幕剩余空间内，不会超出。
• 实际效果：滚动内容覆盖底部文本，滚动区域高度超出屏幕，导致底部文本不可见或被推到屏幕外。

原因分析 #

1. GeometryReader默认会占据父容器的全部可用空间，但内部的LazyVGrid和ScrollView未被限制高度，ScrollView会根据内容无限扩展高度，挤压底部文本的空间。
2. VStack中未明确分配滚动区域的高度优先级，导致滚动区域抢占了底部文本的显示空间。

解决方案 #

通过以下几点调整，限制滚动区域的高度，确保底部文本始终可见：

• 让HFlexibleView在VStack中占据除底部文本外的所有剩余空间。
• 限制LazyVGrid和ScrollView的高度为父容器的可用高度，避免无限扩展。
• 确保ScrollView的内容在分配的高度内滚动，不会超出边界。

修改后的代码示例 #

调整HFlexibleView结构体 #

struct HFlexibleView<Content: View>: View {
    let triggerWidth: CGFloat
    let content: () -> Content
    /// 如果设为true，视图将正常渲染，而非弹性布局
    var disabled: Bool
    var maxmumWidth: CGFloat
    var columns: [GridItem] {
        [GridItem(.adaptive(minimum: triggerWidth,
                            maximum: maxmumWidth))]
    }
    
    init(triggerWidth: CGFloat,
         maxmumWidth: CGFloat = .infinity,
         disabled: Bool = false,
         @ViewBuilder content: @escaping () -> Content) {
        self.triggerWidth = triggerWidth
        self.maxmumWidth = maxmumWidth
        self.disabled = disabled
        self.content = content
    }

    var body: some View {
        if disabled {
            content()
        } else {
            GeometryReader { geometry in
                LazyVGrid(columns: columns) {
                    content()
                        .frame(maxWidth: .infinity, maxHeight: geometry.size.height)
                }
                .frame(maxHeight: geometry.size.height)
            }
        }
    }
}

调整预览视图 #

struct FlexbibleView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            HFlexibleView(triggerWidth: 500) {
                ScrollView {
                    ForEach(0...20, id: \.self) {_ in
                        Image(systemName: "keyboard")
                            .font(.system(size: 30))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
                            .background(Color.green)
                            .cornerRadius(10)
                            .padding(.vertical, 4)
                    }
                }
                .frame(maxHeight: .infinity)
            }
            .frame(maxHeight: .infinity)
            
            Text("Bottom Text")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.gray.opacity(0.2))
        }
    }
}

关键修改说明 #

1. 在HFlexibleView内部，给content()和LazyVGrid添加maxHeight限制，确保内容不会超出GeometryReader的可用高度。
2. 在VStack中给HFlexibleView设置.frame(maxHeight: .infinity)，让它占据除底部文本外的所有垂直空间。
3. 给ScrollView添加.frame(maxHeight: .infinity)，限制其高度为父容器分配的空间，避免无限扩展。
4. 可选：给滚动内容添加垂直间距，提升视觉层次感。

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