Demo of QGridTestApp problem

[writing-shed]

If you embed the ZStack in a List as in the following:

var body: some View {
    GeometryReader { geometry in
        List {
            ZStack {
                self.backgroundGradient
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    if (QConstants.showDesigner) { self.designerView(geometry) }
                    self.gridView(geometry)
                }
            }
        }
    }
}

Then you get this in the simulator:

I have tried various experiments and the best I can come up with is to add a frame modifier as in:

var body: some View {
    GeometryReader { geometry in
        List {
            ZStack {
                self.backgroundGradient
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    if (QConstants.showDesigner) { self.designerView(geometry) }
                    self.gridView(geometry)
                    .frame(width: geometry.size.width,
                           height: geometry.size.height)
                }
            }
        }
    }
}

But this is still wrong because the grid is in the wrong place (see screenshot) and I can't work out how to fix it. Any ideas?

[karolkulesza]

Hi there,

ZStack is used here just for specifying the background gradient, so if you'd like to embed the content in a List view, you should rather do something like this:

  var body: some View {
    GeometryReader { geometry in
      ZStack {
        self.backgroundGradient
        .edgesIgnoringSafeArea(.all)
        List {
          self.gridView(geometry)
            .frame(height: geometry.size.height)
        }
      }
    }
  }

This assumes that you'd like the grid to occupy the whole screen. (in case of embedding it in a List you have to explicitly set QGrid's height. Not sure, however, what is your purpose of embedding it in a List, especially that there might be a conflict of vertical scrolling gestures in such case (embedding QGrid in a List)