GeomertyReader seems to cause problems

[simibac]

When using the GeometryReader inside of a cell, the grid is not rendered as expected. The cells are overlapping as shown in the image below.

struct DataPoint: Identifiable{
    var id = UUID()
    var name:String
}

struct ContentView: View {
    var data:Array<DataPoint> = [DataPoint(name: "A"), DataPoint(name: "B"), DataPoint(name: "C"), DataPoint(name: "D"), DataPoint(name: "E"), DataPoint(name: "F"), DataPoint(name: "G"), DataPoint(name: "H"), DataPoint(name: "J"), DataPoint(name: "K"), DataPoint(name: "L"), DataPoint(name: "M")]

    var body: some View {
        QGrid(data,
              columns: 3,
              columnsInLandscape: 4,
              vSpacing: 0,
              hSpacing: 0,
              vPadding: 0,
              hPadding: 0,
              content: {data in
                GeometryReader{g in
                    VStack{
                        Text(data.name)
                    }.frame(width:g.size.width, height: g.size.width).background(Color.yellow)
                }
        })
    }
}

Any suggestions how to make sure that every cell is squared, independent from the screen size?

[karolkulesza]

Not sure if it's an issue of QGrid or GeometryReader in such scenario, but as a quick workaround, this one seems to work as expected: (using GeometryReader outside of QGrid) :

struct TestView: View {
  var body: some View {
    GeometryReader{ g in
      QGrid(self.data,
            columns: 3,
            columnsInLandscape: 4,
            vSpacing: 0,
            hSpacing: 0,
            vPadding: 0,
            hPadding: 0,
            content: {data in              
              VStack{
                  Text(data.name)
              }
              .frame(width:g.size.width / 3, height: g.size.width / 3)
              .background(Color.yellow)
              .overlay(Rectangle().stroke(Color.blue, lineWidth: 2))
      })
    }
  }
}