Why is LazyHGrid not as high as its items?

Question

I've got a LazyHGrid that shows multiple Text views in one row. That LazyHGrid is inside a VStack. However, the LazyHGrid is higher than it needs to be. What causes the extra space?

struct ContentView: View {

    let rows = [GridItem()]

    var body: some View {
        VStack {
        
            ScrollView(.horizontal) {
                LazyHGrid(rows: rows) {
                    ForEach(0..<10) { index in
                        Text("Test \(index)")
                            .padding()
                            .foregroundColor(Color.white)
                            .background(Color.black)
                    }
                }
            }
            .background(Color.green)
        
            ScrollView(.vertical) {
                VStack {
                    ForEach(0..<100) { index in
                        Text(String(index))
                            .frame(maxWidth: .infinity)
                    }
                }
            }
            .background(Color.blue)
        }
    }
}

It is not `LazyHGrid`, it is `ScrollView` gets all available space. You have two of them so they divided space equally. — Asperi, Feb 09 '22 at 07:27
If I remove the ScrollView around the LazyHGrid, the result is the same. — WalterBeiter, Feb 09 '22 at 07:29
if possible just set a fixed height to the upper srollview `.frame(height: 100)` ... if you don't want that, read the whole screen height (of both views) with `GeometryReader`and divide the inner heights in some desired ratio (e.g. 1/4 - 3/4) — ChrisR, Feb 09 '22 at 07:40
that is not an option.. LazyHGrid should be only as high as it needs to. There has to be a way that it determines it's height based on it's content. — WalterBeiter, Feb 09 '22 at 08:24

score 3 · Accepted Answer · answered Feb 09 '22 at 09:48

3

You just have to add .fixedSize() modifier to your grid, and it works...

                LazyHGrid(rows: rows) {
                    ForEach(0..<10) { index in
                        Text("Test \(index)")
                            .padding()
                            .foregroundColor(Color.white)
                            .background(Color.black)
                    }
                }
                .fixedSize()

answered Feb 09 '22 at 09:48

Zaphod

6,758
3
40
60

This won't work for grids with multiple rows. – Mischa Aug 05 '22 at 18:59
It is possible, but it was not the original question. – Zaphod Aug 08 '22 at 15:54
2

That's correct. Just added the info for people like me who stumble upon this page from Google searching for self-sizing multi-row `LazyHGrids` and assuming this also solves their problem. – Mischa Aug 08 '22 at 20:33
anyone solved it for multiple rows? – Kraming Jul 25 '23 at 03:05

ChrisR · Answer 2 · 2022-02-09T09:47:52.273

This works: Reading the height of the cells with an overlay with GeometryReader

struct ContentView: View {
    
    let rows = [ GridItem() ]
    @State private var contentSize = CGFloat.zero
    
    var body: some View {
        VStack {
            
            ScrollView(.horizontal) {
                LazyHGrid(rows: rows) {
                    ForEach(0..<10) { index in
                            Text("Test \(index)")
                                .padding()
                                .foregroundColor(.white)
                                .background(.black)
                            
                                .overlay(
                                    GeometryReader { geo in
                                        Color.clear.onAppear {
                                            contentSize = geo.size.height
                                        }
                                    }
                                )

                    }
                }
            }
            .frame(height: contentSize + 20)
            .background(Color.green)
            
            ScrollView(.vertical) {
                VStack {
                    ForEach(0..<100) { index in
                        Text(String(index))
                            .frame(maxWidth: .infinity)
                    }
                }
            }
            .background(Color.blue)
        }
    }
}

Why is LazyHGrid not as high as its items?

2 Answers2