How to center items into a cell of a GridView?

[nick85]

Hi,

I have a GridView

GridItemView
    {
        id: grid
        width: 500
        height: 200
 
        cellWidth: 200
        cellHeight: 80
 
        anchors.verticalCenter: parent.verticalCenter;
        anchors.horizontalCenter: parent.horizontalCenter;
 
        model: myModel
        delegate:  MyDelegate{}
    }

GridItemView
    {
        id: grid
        width: 500
        height: 200

        cellWidth: 200
        cellHeight: 80

        anchors.verticalCenter: parent.verticalCenter;
        anchors.horizontalCenter: parent.horizontalCenter;

        model: myModel
        delegate:  MyDelegate{}
    }

To copy to clipboard, switch view to plain text mode 

and MyDelegate is a simple rectagle with parent size:

Rectangle
{
    property int margin: 20;
    width: GridView.view.cellWidth - margin
    height: GridView.view.cellHeight - margin
 
    Text
    {
        id: textValue
        text: modelVal
        horizontalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

Rectangle
{
    property int margin: 20;
    width: GridView.view.cellWidth - margin
    height: GridView.view.cellHeight - margin

    Text
    {
        id: textValue
        text: modelVal
        horizontalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

To copy to clipboard, switch view to plain text mode 

The delegates have correct size but elements is aligned on the top-left of the cell grid.

I've tried to add

anchors.centerIn: parent.Center

anchors.centerIn: parent.Center

To copy to clipboard, switch view to plain text mode 

in MyDelegate but don't works:all elements is placed at the center of GridView.

I've tried also to add margins but don't works.

How I can center the delegate element into the cell?

[aamer4yu]

Try adding vertical alignment too ( similar to horizontalAlignment: Text.AlignVCenter)

[wysota]

Item {
  property int margin: 20
  width: GridView.view.cellWidth
  height: GridView.view.cellHeight
  Rectangle {
    anchors.fill: parent
    anchors.margins: margin
    Text {
      anchors.centerIn: parent
      // ...
    }
  }
}

Item {
  property int margin: 20
  width: GridView.view.cellWidth
  height: GridView.view.cellHeight
  Rectangle {
    anchors.fill: parent
    anchors.margins: margin
    Text {
      anchors.centerIn: parent
      // ...
    }
  }
}

To copy to clipboard, switch view to plain text mode 

[nick85]

Try adding vertical alignment too ( similar to horizontalAlignment: Text.AlignVCenter)

Tried but doesn't works.

Item {
  property int margin: 20
  width: GridView.view.cellWidth
  height: GridView.view.cellHeight
  Rectangle {
    anchors.fill: parent
    anchors.margins: margin
    Text {
      anchors.centerIn: parent
      // ...
    }
  }
}

Item {
  property int margin: 20
  width: GridView.view.cellWidth
  height: GridView.view.cellHeight
  Rectangle {
    anchors.fill: parent
    anchors.margins: margin
    Text {
      anchors.centerIn: parent
      // ...
    }
  }
}

To copy to clipboard, switch view to plain text mode 

This works even if I wanted to avoid using another inner element.

Thanks anyway!

[wysota]

If you don't care about colors, you can get rid of the rectangle element and use the following:

Item {
  property int margin: 20
  width: ...
  height: ...
  Text {
    anchors { fill: parent; margins: margin }
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    // ...
  }
}

Item {
  property int margin: 20
  width: ...
  height: ...
  Text {
    anchors { fill: parent; margins: margin }
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    // ...
  }
}

To copy to clipboard, switch view to plain text mode 

[nick85]

I'm interested in colors. However, the second solution that's okay.. thanks again

[wysota]

It's not ok if you want to change the item background color.

[nick85]

sorry I meant the solution at #3