add book

Qt6QMLBeginnersCode/7-Positioning/2-Anchors/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(2-Anchors VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app2-Anchors
+    main.cpp
+)
+
+qt_add_qml_module(app2-Anchors
+    URI 2-Anchors
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app2-Anchors PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app2-Anchors
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app2-Anchors
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/7-Positioning/2-Anchors/Main.qml

@@ -0,0 +1,165 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+import QtQuick
+
+Window {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Anchors")
+
+    Rectangle {
+        id: containerRectId
+        width: 300
+        height: width
+        border.color: "black"
+        anchors.centerIn: parent
+
+        Rectangle {
+            id: topLeftRectId
+            width: 100
+            height: width
+            color: "magenta"
+            Text{
+                anchors.centerIn: parent
+                text: "1"
+                font.pointSize: 20
+            }
+        }
+
+
+        Rectangle {
+            id: topCenterRectId
+            width: 100
+            height: width
+            color: "yellowgreen"
+            anchors.left: topLeftRectId.right
+            Text{
+                anchors.centerIn: parent
+                text: "2"
+                font.pointSize: 20
+            }
+        }
+
+
+
+        Rectangle {
+            id: topRightRectId
+            width: 100
+            height: width
+            color: "dodgerblue"
+            anchors.left: topCenterRectId.right
+            Text{
+                anchors.centerIn: parent
+                text: "3"
+                font.pointSize: 20
+            }
+        }
+
+
+
+
+
+        Rectangle {
+            id: centerLeftRectId
+            width: 100
+            height: width
+            color: "red"
+            anchors.top: topLeftRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "4"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: centerCenterRectId
+            width: 100
+            height: width
+            color: "green"
+
+            //Position relative to other rectangles
+            /*
+            anchors.left: centerLeftRectId.right
+            anchors.top: topRightRectId.bottom
+            */
+
+            //Position relative to parent center lines
+            /*
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            */
+
+            //Position using the anchors.centerIn shorthand
+            anchors.centerIn: parent
+
+            Text{
+                anchors.centerIn: parent
+                text: "5"
+                font.pointSize: 20
+            }
+
+        }
+        Rectangle {
+            id: centerRightRectId
+            width: 100
+            height: width
+            color: "blue"
+            anchors.left: centerCenterRectId.right
+            anchors.top: topRightRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "6"
+                font.pointSize: 20
+            }
+        }
+
+
+
+
+        //The bottom row will be positioned in terms of centerCenterRectId
+        Rectangle {
+            id: bottomLeftRectId
+            width: 100
+            height: width
+            color: "royalblue"
+            anchors.right: centerCenterRectId.left
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "7"
+                font.pointSize: 20
+            }
+        }
+        Rectangle {
+            id: bottomCenterRectId
+            width: 100
+            height: width
+            color: "yellow"
+            anchors.left: centerCenterRectId.left
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "8"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: bottomRightRectId
+            width: 100
+            height: width
+            color: "pink"
+            anchors.left: centerCenterRectId.right
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "9"
+                font.pointSize: 20
+            }
+        }
+    }
+
+}

Qt6QMLBeginnersCode/7-Positioning/2-Anchors/main.cpp

@@ -0,0 +1,20 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("2-Anchors", "Main");
+
+    return app.exec();
+}

Qt6QMLBeginnersCode/7-Positioning/3-AnchroMarginAndOffset/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(3-AnchroMarginAndOffset VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app3-AnchroMarginAndOffset
+    main.cpp
+)
+
+qt_add_qml_module(app3-AnchroMarginAndOffset
+    URI 3-AnchroMarginAndOffset
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app3-AnchroMarginAndOffset PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app3-AnchroMarginAndOffset
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app3-AnchroMarginAndOffset
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/7-Positioning/3-AnchroMarginAndOffset/Main.qml

@@ -0,0 +1,162 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+import QtQuick
+import QtQuick.Window
+
+Window {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Anchors: Margins and offsets")
+
+    Rectangle {
+        id: containerRectId
+        width: 300
+        height: width
+        border.color: "black"
+        anchors.centerIn: parent
+
+        Rectangle {
+            id: topLeftRectId
+            width: 100
+            height: width
+            color: "magenta"
+            Text{
+                anchors.centerIn: parent
+                text: "1"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: topCenterRectId
+            width: 100
+            height: width
+            color: "yellowgreen"
+            anchors.left: topLeftRectId.right
+            Text{
+                anchors.centerIn: parent
+                text: "2"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: topRightRectId
+            width: 100
+            height: width
+            color: "dodgerblue"
+            anchors.left: topCenterRectId.right
+            Text{
+                anchors.centerIn: parent
+                text: "3"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: centerLeftRectId
+            width: 100
+            height: width
+            color: "red"
+            anchors.top: topLeftRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "4"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: centerCenterRectId
+            width: 100
+            height: width
+            color: "green"
+
+            /*
+
+
+            //Anchor relative to other rectangles
+            anchors.left: centerLeftRectId.right
+            anchors.top: topRightRectId.bottom
+
+            //Margins
+            anchors.topMargin: 10
+            //anchors.rightMargin: 10  // This margin won't work because we have no right anchor
+            //anchors.leftMargin: 10
+            */
+
+            //Anchor relative to center anchor lines
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+
+            //Offsets
+            anchors.horizontalCenterOffset: -10
+            anchors.verticalCenterOffset: 10
+
+            Text{
+                anchors.centerIn: parent
+                text: "5"
+                font.pointSize: 20
+            }
+        }
+        Rectangle {
+            id: centerRightRectId
+            width: 100
+            height: width
+            color: "blue"
+            anchors.left: centerCenterRectId.right
+            anchors.top: topRightRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "6"
+                font.pointSize: 20
+            }
+        }
+
+
+        //The bottom row will be positioned in terms of centerCenterRectId
+        Rectangle {
+            id: bottomLeftRectId
+            width: 100
+            height: width
+            color: "royalblue"
+            anchors.right: centerCenterRectId.left
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "7"
+                font.pointSize: 20
+            }
+
+        }
+        Rectangle {
+            id: bottomCenterRectId
+            width: 100
+            height: width
+            color: "yellow"
+            anchors.left: centerCenterRectId.left
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "8"
+                font.pointSize: 20
+            }
+        }
+
+        Rectangle {
+            id: bottomRightRectId
+            width: 100
+            height: width
+            color: "pink"
+            anchors.left: centerCenterRectId.right
+            anchors.top: centerCenterRectId.bottom
+            Text{
+                anchors.centerIn: parent
+                text: "9"
+                font.pointSize: 20
+            }
+        }
+    }
+}

Qt6QMLBeginnersCode/7-Positioning/3-AnchroMarginAndOffset/main.cpp

@@ -0,0 +1,20 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("3-AnchroMarginAndOffset", "Main");
+
+    return app.exec();
+}

Qt6QMLBeginnersCode/7-Positioning/4-AnchorParentSibling/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(4-AnchorParentSibling VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app4-AnchorParentSibling
+    main.cpp
+)
+
+qt_add_qml_module(app4-AnchorParentSibling
+    URI 4-AnchorParentSibling
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app4-AnchorParentSibling PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app4-AnchorParentSibling
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app4-AnchorParentSibling
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/7-Positioning/4-AnchorParentSibling/Main.qml

@@ -0,0 +1,39 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+import QtQuick
+
+Window {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Anchors : Parents and Siblings")
+
+    Rectangle {
+        id: containerRectId
+        width: 300
+        height: width
+        border.color: "black"
+        anchors.centerIn: parent
+
+        Rectangle {
+            id: topLeftRectId
+            width: 100
+            height: width
+            color: "magenta"
+
+            //This anchor won't work because siblingRect isn't either a ibling or a parent
+            anchors.top: siblingRect.bottom
+        }  
+    }
+
+    Rectangle {
+        id: siblingRect
+        width: 200
+        height: 200
+        color : "black"
+        anchors.right: containerRectId.left
+    }
+
+
+}

Qt6QMLBeginnersCode/7-Positioning/4-AnchorParentSibling/main.cpp

@@ -0,0 +1,19 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("4-AnchorParentSibling", "Main");
+
+    return app.exec();
+}

Qt6QMLBeginnersCode/7-Positioning/5-Positioning/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(5-Positioning VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app5-Positioning
+    main.cpp resource.qrc
+)
+
+qt_add_qml_module(app5-Positioning
+    URI 5-Positioning
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app5-Positioning PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app5-Positioning
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app5-Positioning
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/7-Positioning/5-Positioning/Main.qml

@@ -0,0 +1,59 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+import QtQuick
+
+Window {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Posionners")
+
+    Grid {
+        columns: 2
+        spacing: 10
+//        rowSpacing: 10
+//        columnSpacing: 10
+
+        horizontalItemAlignment: Grid.AlignRight
+        verticalItemAlignment: Grid.AlignVCenter
+
+        LayoutMirroring.enabled: true
+        LayoutMirroring.childrenInherit: true
+
+        Rectangle {
+            id: topLeftRectId
+            width: 60
+            height: width
+            color: "magenta"
+            Text{text: "1"; anchors.centerIn: parent; font.pointSize: 20}
+        }
+
+        Rectangle {
+            id: topCenterRectId
+            width: 100
+            height: width
+            color: "yellowgreen"
+            Text{text: "2"; anchors.centerIn: parent; font.pointSize: 20}
+        }
+
+        Rectangle {
+            id: topRightRectId
+            width: 100
+            height: width
+            color: "dodgerblue"
+            Text{text: "3"; anchors.centerIn: parent; font.pointSize: 20}
+
+        }
+
+        Rectangle {
+            id: centerLeftRectId
+            width: 100
+            height: width
+            color: "beige"
+            Text{text: "4"; anchors.centerIn: parent; font.pointSize: 20}
+
+        }
+
+    }
+}

Qt6QMLBeginnersCode/7-Positioning/5-Positioning/main.cpp

@@ -0,0 +1,20 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("5-Positioning", "Main");
+
+    return app.exec();
+}

Qt6QMLBeginnersCode/7-Positioning/5-Positioning/resource.qrc

@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>images/LearnQt.png</file>
+    </qresource>
+</RCC>

Qt6QMLBeginnersCode/7-Positioning/6-Layouts/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(6-Layouts VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app6-Layouts
+    main.cpp
+)
+
+qt_add_qml_module(app6-Layouts
+    URI 6-Layouts
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app6-Layouts PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app6-Layouts
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app6-Layouts
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

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
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Qt6QMLBeginnersCode/7-Positioning/6-Layouts/main.cpp

@@ -0,0 +1,20 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("6-Layouts", "Main");
+
+    return app.exec();
+}

Qt6QMLBeginnersCode/7-Positioning/7-Flow/CMakeLists.txt

@@ -0,0 +1,40 @@
+# Copyright (c) Daniel Gakwaya.
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.16)
+
+project(7-Flow VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app7-Flow
+    main.cpp
+)
+
+qt_add_qml_module(app7-Flow
+    URI 7-Flow
+    VERSION 1.0
+    QML_FILES Main.qml
+)
+
+set_target_properties(app7-Flow PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE TRUE
+    WIN32_EXECUTABLE TRUE
+)
+
+target_link_libraries(app7-Flow
+    PRIVATE Qt6::Quick
+)
+
+install(TARGETS app7-Flow
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

Qt6QMLBeginnersCode/7-Positioning/7-Flow/Main.qml

@@ -0,0 +1,140 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+import QtQuick
+import QtQuick.Window
+
+Window {
+    visible: true
+    width: 640
+    height: 480
+    title: qsTr("Flow")
+
+    Flow {
+        id: containerFlowId
+        width : parent.width
+        height: parent.height
+
+        flow: Flow.TopToBottom
+        layoutDirection: Qt.RightToLeft
+
+        //spacing: 20
+
+
+        Rectangle {
+            id: topLeftRectId
+            width : 70
+            height: 70
+            color: "green"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "1"
+            }
+        }
+
+        Rectangle {
+            id: topCenterRectId
+            width : 100
+            height: 100
+            color: "beige"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "2"
+            }
+        }
+
+        Rectangle {
+            id: topRightRectId
+            width : 100
+            height: 100
+            color: "dodgerblue"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "3"
+            }
+        }
+
+        Rectangle {
+            id: leftCenterRectId
+            width : 100
+            height: 100
+            color: "magenta"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "4"
+            }
+        }
+
+        Rectangle {
+            id: centerRectId
+            width : 100
+            height: 100
+            color: "red"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "5"
+            }
+        }
+        Rectangle {
+            id: rightCenterId
+            width : 100
+            height: 100
+            color: "yellow"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "6"
+            }
+        }
+
+        Rectangle {
+            id: bottomLeftRectId
+            width : 100
+            height: 100
+            color: "royalblue"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "7"
+            }
+        }
+
+        Rectangle {
+            id: bottomCenterRect
+            width : 100
+            height: 100
+            color: "greenyellow"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "8"
+            }
+        }
+
+        Rectangle {
+            id: bottomRightRectId
+            width : 100
+            height: 100
+            color: "blue"
+            Text {
+                anchors.centerIn: parent
+                color: "black"
+                font.pointSize: 30
+                text: "9"
+            }
+        }
+    }
+}

Qt6QMLBeginnersCode/7-Positioning/7-Flow/main.cpp

@@ -0,0 +1,20 @@
+// Copyright (c) Daniel Gakwaya.
+// SPDX-License-Identifier: MIT
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+
+int main(int argc, char *argv[])
+{
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
+        &app, []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("7-Flow", "Main");
+
+    return app.exec();
+}