PDA

View Full Version : Forcing desired space between two rectangles in GridLayout



TheIndependentAquarius
2nd May 2016, 08:36
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1 // GridLayout

Window
{
visible: true

height: 700; width: 1000

GridLayout
{
id: gridLayout
rows: 15;
columns: 15;
rowSpacing: 0; columnSpacing: 0

property int secondScreenOptionsOpacity: 0

property int hmmiButtonRow: 0
property int hmmiButtonCol: 0

Rectangle
{
id: hmmi;
Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
height: 70; width: 150; color: "pink";
Layout.alignment: Qt.AlignTop
Text { text: "HMMI"; anchors.centerIn: parent }
MouseArea {anchors.fill: parent; onClicked: mainScreenFunctionality.hmmiControlButton()}
}

property int optionsButtonRow: 1
property int optionsButtonCol: 0

Rectangle
{
id: optionsButton;
Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
height: 70; width: 150; color: "red"
Layout.alignment: Qt.AlignBottom
Text { text: "Options..."; anchors.centerIn: parent }
MouseArea { anchors.fill: parent; onClicked: mainScreenFunctionality.optionsButton() }
}

property int eulerWidgetRow: 1
property int eulerWidgetCol: 11

Rectangle
{
id: eulerWidgetControl;
Layout.row :gridLayout.eulerWidgetRow; Layout.column: gridLayout.eulerWidgetCol;
height: 140; width: 140; color: "yellow"
Layout.columnSpan: 2; Layout.rowSpan: 2
Layout.alignment: Qt.AlignRight
Text { text: "euler"; anchors.centerIn: parent }
}
}
}


----------

Even though I have specified row 1 and column 11, see where the yellow rectangle is shown:

----------

There has to be empty space between the red and yellow rectangles.
How to put a rectangle in a particular row and column in GridLayout of QML?

11917

----------


Adding `anchors.fill: parent` to GridLayout does the following:


----------

11918

anda_skoa
2nd May 2016, 12:12
There is no content in any of the columns between the 0 and 11, so these columns have width 0.

If you need those columns to have a certain width, add an appropriately sized Item into any row.

Cheers,
_

TheIndependentAquarius
3rd May 2016, 07:30
Thankful to you, again.