1

I have the following code

struct ContentView: View {
    var items = ["1", "2", "3", "4"]
    
    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem()]) {
            ForEach(items, id: \.self) { item in
                GeometryReader { geometry in
                    Text(item)
                        .frame(width: geometry.size.width, height: geometry.size.width)
                        .background(.red)
                }
            }
        }.background(.green)
    }
}

and I am getting the following screen

enter image description here

What I expected is 4 square grid items but as you can see the grid items are stacked on top of each other and LazyVGrid is not resizing which you can see the green colored

If I remove GeometryReader and set frame(width: height:) to some static number it's working but I would like to set it dynamically based on screen size

Abdurakhmon
  • 2,813
  • 5
  • 20
  • 41
  • "based on screen size" in what way exactly? Can you describe exactly the relation between the frame of the text and the screen size? – Sweeper Jul 02 '23 at 01:18
  • @Sweeper I want two texts in each row, regardless of screen size – Abdurakhmon Jul 03 '23 at 10:47
  • That's the default behaviour. You don't need a `GeometryReader` or a `frame` modifier. Have you tried that? – Sweeper Jul 03 '23 at 10:58

0 Answers0