SwipeView with GridView

Circuits

Hey guys, I am just toying around with SwipeView and GridView neither of which I am very familiar with. What I am attempting to do right now is get multiple pages. Each new page would be a grid view. Eventually I would like to have each new page have different colors/sized Rectangles but at the moment I can't get a single page working.

For some reason my view is only showing a single white Rectangle. Here is the code:


  ListModel {
    id: theModel

      ListElement {
          color: "red"
      }
      ListElement {
          color: "blue"
      }
      ListElement {
          color: "green"
      }
  }


  SwipeView
  {
    id: view
    currentIndex: 1
    anchors.fill: parent

    GridView {
          width: 300; height: 200

          model: theModel
          delegate: Rectangle
          {
            anchors.centerIn: parent
            width: 50
            height: 50

            color: color

          }
      }
  }
  
  PageIndicator {
      id: indicator

      count: view.count
      currentIndex: view.currentIndex

      anchors.bottom: view.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
  }

How can I force the GridView delegate to alter it's color based on the color property seen in

theModel

and why am I only seeing one Rectangle?

Circuits

Ah I think I understand now. It would seem that using predefined properties is not okay and I was wrong about how the GridView was anchoring itself. Something like this works:

ListModel {
id: theModel

  ListElement {
      name: "red"
      breadth: 75
      ceiling: 120
  }
  ListElement {
      name: "blue"
      breadth: 100
      ceiling: 120
  }
  ListElement {
      name: "green"
      breadth: 200
      ceiling: 120
  }

}

SwipeView
{
id: view
currentIndex: 1
anchors.fill: parent

GridView {
      width: 300; height: 200

      anchors.fill: parent

      model: theModel
      delegate: Rectangle
      {

        width: breadth
        height: ceiling
        color: name

      }
  }

}