CODEWITHSUNDEEP
qtgridviewqml
İbrahim
İbrahim

Reputation: 1021

QML - How to fit and align items of GridView?

I want to fit all rectangles into GridView. I didn't use GridLayout because when I remove a rectangle from the GridLayout, they aligns again with GridLayout.
So I used GridView and my code:

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3

Window {
  visible: true
  width: 420
  height: 720
  title: qsTr("Hello World")


  GridView {
    id: area

    // If device orientation is vertical, GridView shall be 4x(model/4)
    property int verticalChoice: (parent.width < parent.height) ? 4 : 10
    //If device orientation is horizontal, GridView shall be (model/(model/4))x4
    property int horizontalChoice: (parent.width > parent.height) ? 10 : 4

    width: cellWidth * verticalChoice
    height: cellHeight * horizontalChoice
    anchors.centerIn: parent

    cellWidth: (parent.width / verticalChoice)
    cellHeight: (parent.height / horizontalChoice)

    model: 40
    clip: true
    interactive: false

    delegate: Rectangle {
      id: rect
      width: area.cellWidth - 5
      height: area.cellHeight - 5
      color: 'red'
      Text {
        text: index
        color: 'white'
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        onClicked: rect.destroy(1000)
      }
    }
  }
}

I set model of GridView as 40 and I set interactive as false. But I see just 15 items like this:
image.png
Also I wrote anchors.centerIn: parent but it didn't run. How can I do them (to fit and align)?

Upvotes: 2

Views: 3402

Answers (1)

augre
augre

Reputation: 2051

For the number of items you simply have an error in the assignment of horizontalChoice, setting a 4*4 grid instead of a 10*4:

property int verticalChoice: (parent.width < parent.height) ? 4 : 10
property int horizontalChoice: (parent.width < parent.height) ? 10 : 4

For the centering issue, anchors.centerIn: parent is actually working as expected but since you specified the delegates to be 5px smaller than the cellWidth/cellWidth, you have a 5px empty space on the right and bottom.

To prevent that, you can use a wrapping Item (As far as I know GridView does not have any spacing property):

delegate: Item {
    width: area.cellWidth
    height: area.cellHeight
    Rectangle {
        color: 'red'
        anchors {
            fill: parent
            margins: 5
        }

        Text {
            text: index
            color: 'white'
            anchors.centerIn: parent
        }
    }
}

Upvotes: 1

Related Questions