Solved Help with GridView
-
I am having some trouble with
GridView
. I have a 1024 (width) screen. I want to have threeRectangles
that will fill theirCell
be evenly spaced on the screen like so:Keep in mind I made the above image in mspaint so just pretend it's perfect XD (screen is red)
How can I do this using
GridView
? I have tried all sorts of things but I can't seem to get it right. The best I have managed to do is to create cell's which are larger than theRectangles
within them. That on top of decreasing the width of theGridView
allows me to space them out evenly but only with respect to one another and not the parent of theGridView
. Here's my basic code:GridView { id: gridView height: parent.height width: parent.width model: 3 cellWidth: 150 cellHeight: 150 delegate: Rectangle { height: 150 width: 150 color: "blue" } }
-
Ah, okay, then maybe something like this:
GridView { id: gridView anchors.fill: parent model: 3 cellWidth: width/count cellHeight: cellWidth delegate: Rectangle { width: gridView.cellWidth height: gridView.cellHeight color: "red" Item { width: 150 height: 150 anchors.margins: 20 anchors.centerIn: parent Rectangle { anchors.fill: parent color: "blue" } } } }
-
anchors can do this:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { visible: true width: 450 height: 450 title: qsTr("Grid View Spacing") GridView { id: gridView height: parent.height width: parent.width model: 3 cellWidth: 150 cellHeight: 150 delegate: Rectangle { width: gridView.cellWidth height: gridView.cellHeight color: "red" Item { anchors.fill: parent anchors.margins: 20 Rectangle { anchors.fill: parent color: "blue" } } } } }
-
I have been able to get that but what I need to do is now take that
GridView
and center it within theWindow
, how might I do that? For instance here is what I have:Item { //This item is 1024 wide id : gridViewContainer GridView { id: gridView anchors.fill: parent cellHeight: 150 cellWidth: 150 model: 3 delegate: Item { width: gridView.cellWidth height: gridView.cellHeight Rectangle { anchors.fill: parent color: "blue" anchors.margins: 20 } } }
Here is what this actually looks like (took a screenshot) and cropped it:
and here is what I want (edited the above image in mspaint):
Does this make sense? -
Ah, okay, then maybe something like this:
GridView { id: gridView anchors.fill: parent model: 3 cellWidth: width/count cellHeight: cellWidth delegate: Rectangle { width: gridView.cellWidth height: gridView.cellHeight color: "red" Item { width: 150 height: 150 anchors.margins: 20 anchors.centerIn: parent Rectangle { anchors.fill: parent color: "blue" } } } }
-
YES! This is exactly what I wanted, well almost, I altered the margins so that (given you only have an odd number of items per row) everything will be spaced perfectly evenly:
Component { id: girdViewComponent Item { //This item is 1024 wide id : gridViewContainer GridView { id: gridView anchors.fill: parent cellHeight: 150 cellWidth: parent.width/count model: 3 delegate: Item { width: gridView.cellWidth height: gridView.cellHeight Rectangle { anchors.fill: parent anchors.topMargin: 10 anchors.bottomMargin: 10 anchors.leftMargin: index % 2 !== 0 ? 0 : 10 anchors.rightMargin: index % 2 !== 0 ? 0 : 10 Rectangle { width: 10 height: 10 anchors.centerIn: parent color: "red" } } } }