add code

1DemoApp/CMakeLists.txt

@@ -0,0 +1,42 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(1DemoApp VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app1DemoApp
+    main.cpp
+)
+
+qt_add_qml_module(app1DemoApp
+    URI 1DemoApp
+    VERSION 1.0
+    QML_FILES
+        Main.qml
+)
+
+# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
+# If you are developing for iOS or macOS you should consider setting an
+# explicit, fixed bundle identifier manually though.
+set_target_properties(app1DemoApp PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app1DemoApp
+    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(app1DemoApp
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app1DemoApp
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

1DemoApp/Main.qml

@@ -0,0 +1,72 @@
+import QtQuick
+
+Window {
+    id: rootId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Hello World")
+    property string textToShow: "hello"
+    // Text {
+    //     text: "Hello World!"
+    //     font.family: "Helvetica"
+    //     font.pointSize: 24
+    //     color: "red"
+    //     anchors.centerIn: parent
+    // }
+    Row {
+        id: row1
+        anchors.centerIn: parent
+        spacing: 20
+        Rectangle {
+            id: redRectId
+            width: 100
+            height: 100
+            color: "red"
+            radius: 20
+            Text {
+                id: textId
+                anchors.centerIn: parent
+                text: rootId.textToShow
+                color: "white"
+                font.pointSize: 15
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    console.log(textId.text)
+                    textToShow = "clicked"
+                }
+            }
+        }
+        Rectangle {
+            id: blueRectId
+            width: 100
+            height: 100
+            color: "blue"
+            radius: 20
+        }
+        Rectangle {
+            id: greenRectId
+            width: 100
+            height: 100
+            // radius:
+            color: "green"
+            radius: 20
+        }
+        Rectangle {
+            width: 100
+            height: 100
+            color: "dodgerblue"
+            radius: 100
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    console.log("Clicked on dodgerblue circle")
+                }
+            }
+        }
+    }
+}

1DemoApp/main.cpp

@@ -0,0 +1,18 @@
+#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("1DemoApp", "Main");
+
+    return app.exec();
+}

2DemoApp/CMakeLists.txt

@@ -0,0 +1,42 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(2DemoApp VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app2DemoApp
+    main.cpp
+)
+
+qt_add_qml_module(app2DemoApp
+    URI 2DemoApp
+    VERSION 1.0
+    QML_FILES
+        Main.qml
+)
+
+# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
+# If you are developing for iOS or macOS you should consider setting an
+# explicit, fixed bundle identifier manually though.
+set_target_properties(app2DemoApp PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app2DemoApp
+    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(app2DemoApp
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app2DemoApp
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

2DemoApp/Main.qml

@@ -0,0 +1,123 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("QML Datatypes Demo")
+
+    property string mString: "https://www.learnqt.guide"
+
+    property int mInt: 45
+
+    property bool isFemale: true
+
+    property double mDouble: 77.5
+
+    property url mUrl: "https://www.learnqt.guide"
+
+    property var aNumbre: 100
+    property var aBool: false
+    property var aString: "Hello world!"
+    property var anotherString: String("#FF008800")
+    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
+    property var aRect: Qt.rect(10, 10, 10, 10)
+    property var aPoint: Qt.point(10, 10)
+    property var aSize: Qt.size(10, 10)
+    property var aVector3d: Qt.vector3d(100, 100, 1000)
+    property var anArray: [1, 2, 3, "four", "five", (function(){return "six";})]
+    property var anObject: {"foo": 10, "bar": 20}
+    property var aFunction: (function() {return "one"})
+
+    property var aFont: Qt.font({family: "Consolas", pointSize: 30, bold: false})
+    property date mDate: "2018-07-19"
+
+    property var fonts: Qt.fontFamilies()
+
+    // Row {
+        // anchors.centerIn: parent
+        Rectangle {
+            id: yellowRectId
+            x: 300
+            width: 200
+            height: 100 + mInt
+
+            color: "yellow"
+
+            Text {
+                id: mTextId
+                font: aFont
+                anchors.centerIn: parent
+                text: mString
+                // font.bold: isFemale ? true : false
+            }
+        }
+
+        Rectangle {
+            anchors.left: yellowRectId.right
+            width: 200
+            height: width * 1.5
+            color: aColor
+
+        }
+    // }
+
+
+    Rectangle {
+        id: blueRectId
+        color: "blue"
+        width: 100
+        height: 100
+        anchors.bottom: parent.bottom
+        anchors.right: yellowRectId.left
+        // anchors.horizontalCenter: parent.horizontalCenter
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                // yellowRectId.height = yellowRectId.height + 10
+                yellowRectId.height = Qt.binding(function() {
+                    return yellowRectId.width + 10
+                })
+
+                for (var i = 0; i < fonts.length; i++) {
+                    console.log("["+i+"]:" + fonts[i])
+                }
+
+                console.log(Qt.md5("123456"))
+                console.log("Quitting the App")
+                Qt.quit()
+            }
+        }
+    }
+
+
+    Component.onCompleted: {
+        if (mString === mUrl)
+        {
+            console.log("They are the same")
+        }else{
+            console.log("They are NOT the same")
+        }
+
+        if (isFemale) {
+            console.log("You may wear a dress")
+        }
+        else {
+            console.log("You may wear a suit")
+        }
+
+        console.log("The value of mInt is :"+mInt)
+
+        for(var i = 0; i < anArray.length; i++) {
+            if (i===5) {
+                console.log(anArray[i]())
+            }
+            else {
+                console.log(anArray[i])
+            }
+        }
+
+        console.log("The date is: " + mDate)
+    }
+}

2DemoApp/main.cpp

@@ -0,0 +1,18 @@
+#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("2DemoApp", "Main");
+
+    return app.exec();
+}

4DemoApp/CMakeLists.txt

@@ -0,0 +1,42 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(4DemoApp VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Quick)
+
+qt_standard_project_setup(REQUIRES 6.5)
+
+qt_add_executable(app4DemoApp
+    main.cpp
+)
+
+qt_add_qml_module(app4DemoApp
+    URI 4DemoApp
+    VERSION 1.0
+    QML_FILES
+        Main.qml MButton.qml
+)
+
+# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
+# If you are developing for iOS or macOS you should consider setting an
+# explicit, fixed bundle identifier manually though.
+set_target_properties(app4DemoApp PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app4DemoApp
+    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(app4DemoApp
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app4DemoApp
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

4DemoApp/MButton.qml

@@ -0,0 +1,70 @@
+import QtQuick
+
+Item {
+    id: rootId
+    property alias buttonText: buttonTextId.text
+    width: containerRectId.width
+    height: containerRectId.height
+
+    signal buttonClicked
+
+
+    Rectangle {
+        id: containerRectId
+        signal greet(string message)
+        color: "red"
+        border {
+            color: "blue"
+            width: 3
+        }
+
+        width: buttonTextId.implicitWidth + 20
+        height: buttonTextId.implicitHeight + 20
+
+        Text {
+            id: buttonTextId
+            text: "MButton"
+            anchors.centerIn: parent
+        }
+
+        MouseArea {
+            id: mouseAreaId
+            anchors.fill: parent
+            hoverEnabled: true
+            // onClicked: {
+            //     // console.log("Clicked on button" + buttonTextId.text)
+            //     rootId.buttonClicked()
+            // }
+            // onClicked: function(mouse) {
+            //     console.log(mouse.x)
+            // }
+            // onClicked: (mouse_param) => console.log(mouse_param.x)
+
+            // onEntered: {
+            //     console.log("enter")
+            // }
+        }
+        onGreet: function(message) {
+            console.log("Greeting with message: " + message);
+        }
+        function respond_your_way(message) {
+            console.log("Responding our way;Greeting with message: " + message);
+        }
+
+
+        Connections {
+            target: mouseAreaId
+            function onClicked() {
+                // console.log("Hello")
+                containerRectId.greet("Hello Lenn")
+            }
+            function onDoubleClicked(mouse) {
+                console.log("DoubleClicked at: " + mouse.x)
+            }
+        }
+
+        Component.onCompleted: {
+            containerRectId.greet.connect(containerRectId.respond_your_way)
+        }
+    }
+}

4DemoApp/Main.qml

@@ -0,0 +1,69 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Hello World")
+
+    // Item {
+    //     id: containerItemId
+    //     x: 50
+    //     y: 50
+    //     width: 600
+    //     height: 300
+
+    //     Rectangle {
+    //         anchors.fill: parent
+    //         color: "beige"
+    //         // border.color: "black"
+    //         // border.width: 10
+    //         border {
+    //             color: "black"
+    //             width: 10
+    //         }
+    //     }
+
+    //     Rectangle {
+    //         x: 0
+    //         y: 10
+    //         width: 50
+    //         height: 50
+    //         color: "red"
+    //     }
+
+    //     Rectangle {
+    //         x: 60
+    //         y: 10
+    //         width: 50
+    //         height: 50
+    //         color: "green"
+    //     }
+
+    //     Image {
+    //         x: 150
+    //         y:50
+    //         width: 100
+    //         height: 100
+    //         // source: "qrc:/...."
+    //     }
+    // }
+
+    MButton {
+        id: button1
+        buttonText: "Button1"
+        // color: "grey"
+        onButtonClicked: {
+            console.log("Clicked on button1")
+        }
+    }
+    MButton {
+        id: button2
+        anchors.top: button1.bottom
+        buttonText: "Button2"
+        // color: "yellow"
+        onButtonClicked: {
+            console.log("Clicked on button1")
+        }
+    }
+}

4DemoApp/main.cpp

@@ -0,0 +1,18 @@
+#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("4DemoApp", "Main");
+
+    return app.exec();
+}