SwiftUI Geometry Reader and Scrollview(.horizontal)

Question

I am trying to create a page that would be similar to the App Store. Where you are displaying the top apps. There would be three rows, and then there would be enough columns to house the data. This would be in a horizontal scroll view. What I am trying to do is to add in the use of GeometryReader so that each 'Page' would take up 90% of the screen. But I can't get the reader to fill the space. I have tried putting the Geometry reader outside and inside the scroll view, but when I try and apply a .frame(reader.size.width * 0.9) to the CellView(), it stops the scrolling. I want what is inside the blue rectangle to fill 90% of the screen. That way when a users sees this screen, they know there is a second page of data that is currently off the screen, and they can scroll to it.

struct TestView: View {
    
    let totalItems = 4 //This would be an array count or something
    let numberOfRows: Int = 3
    let widthOfScreen: CGFloat = 0.9 //Percent of the width of screen
    var numberOfColumns: Int
    
    init(){
        numberOfColumns = (self.totalItems % numberOfRows == 0 ? (self.totalItems / numberOfRows): (self.totalItems / numberOfRows) + 1)
        print(numberOfColumns)
    }
    
    var body: some View {
                    GeometryReader{ reader in
            ScrollView(.horizontal, showsIndicators: false){
                ForEach(0..<numberOfRows, id: \.self){ row in
                    HStack{
                        ForEach(0..<numberOfColumns, id: \.self){ column in
                            let index = (column * numberOfRows) + row
                            if index <= totalItems {
                                CellView()
                                    .frame(width: reader.size.width * widthOfScreen, alignment: .leading)
                                    .padding(.leading, 6)
                            } else {
                                EmptyCellView()
                                    .frame(width: reader.size.width * widthOfScreen, alignment: .leading)
                                    .padding(.leading, 6)
                            }
                        }
                        Spacer()
                    }
                }
            }
        }
        .frame(height: frameHeight)
    }
}

struct CellView: View {
    
    let imageSize: CGFloat = 50
    let cellHeaderText: String = "Title"
    let cellHeaderSubtext: String = "Subtitle"
    
    var body: some View {
        HStack(){
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.green)
                .frame(width: imageSize, height: imageSize)
            VStack(alignment: .leading){
                Text(cellHeaderText)
                    .font(.body)
                    .fontWeight(.semibold)
                Text(cellHeaderSubtext)
                    .font(.subheadline)
                    .fontWeight(.light)
            }
        }
    }
}


struct EmptyCellView: View {
    
    let imageSize: CGFloat = 50
    let cellHeaderText: String = "Title"
    let cellHeaderSubtext: String = "Subtitle"
    
    var body: some View {
        HStack(){
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.clear)
                .frame(width: imageSize, height: imageSize)
                .foregroundColor(Color.clear)
            VStack(alignment: .leading){
                Text(cellHeaderText)
                    .font(.body)
                    .fontWeight(.semibold)
                    .foregroundColor(Color.clear)
                Text(cellHeaderSubtext)
                    .font(.subheadline)
                    .fontWeight(.light)
                    .foregroundColor(Color.clear)
            }
        }
    }
}

Answer 1

for me, adding a .frame(height: 300) to the GeometryReader fixed the issue. Is this the correct approach. Without this frame, I can't scroll the frame.

But the down side to this, is then I am constraining the height of the geometry reader, which then won't dynamically change to the amount of rows.