add book

Qt6QMLBeginnersCode/7-Positioning/6-Layouts/Main.qml

@@ -0,0 +1,164 @@
+// 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
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+