165 lines
3.5 KiB
QML
165 lines
3.5 KiB
QML
// Copyright (c) Daniel Gakwaya.
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
Window {
|
|
visible: true
|
|
width: mGridLayoutId.implicitWidth
|
|
height: mGridLayoutId.implicitHeight
|
|
title: qsTr("Layouts")
|
|
|
|
GridLayout{
|
|
id: mGridLayoutId
|
|
anchors.fill: parent
|
|
columns: 3
|
|
layoutDirection: Qt.RightToLeft
|
|
|
|
Rectangle {
|
|
id: topLeftRectId
|
|
width: 70
|
|
height: width
|
|
color: "green"
|
|
Text{text: "1"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
|
|
//Showing Layout alignment
|
|
Layout.alignment: Qt.AlignRight|Qt.AlignTop
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.maximumWidth: 150
|
|
Layout.maximumHeight: 150
|
|
}
|
|
Rectangle {
|
|
id: topCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "red"
|
|
Text{text: "2"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.columnSpan: 2
|
|
}
|
|
|
|
//Taking this out because topCenterRectId will span two columns
|
|
//Rectangle "3" taken out . Its space will be taken by Rectangle "2"
|
|
/*
|
|
Rectangle {
|
|
id: topRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "blue"
|
|
Text{text: "3"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
*/
|
|
|
|
|
|
Rectangle {
|
|
id: centerLeftRectId
|
|
width: 100
|
|
height: width
|
|
color: "beige"
|
|
Text{text: "4"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.rowSpan: 2
|
|
|
|
}
|
|
Rectangle {
|
|
id: centerCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "pink"
|
|
Text{text: "5"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
}
|
|
Rectangle {
|
|
id: centerRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "yellow"
|
|
Text{text: "6"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
}
|
|
|
|
|
|
//Taking this out because the beige centerLeftRectId rectangle will span two rows
|
|
//Rectangle "7" Taken out. Its space will be taken by Rectangle 4
|
|
/*
|
|
|
|
Rectangle {
|
|
id: bottomLeftRectId
|
|
width: 100
|
|
height: width
|
|
color: "magenta"
|
|
Text{text: "7"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
Rectangle {
|
|
id: bottomCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "yellowgreen"
|
|
Text{text: "8"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
}
|
|
Rectangle {
|
|
id: bottomRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "dodgerblue"
|
|
Text{text: "9"; anchors.centerIn: parent; font.pointSize: 20}
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|