Qt6-Start

        Look back to the first know Qt, it had passed 8years, wow, that's really a long time.I remeber used Qt4 for the begin, but now is Qt6, hard to image it takes 8 years from Qt4 to Qt6. Cut a long story short, Let's start Qt6 together...

Get latest version

        we can get the latest version from https://qt.io/,  choice offline installer or online installer.Or could build the source code:https://wiki.qt.io/Building_Qt_6_from_Git

Modules

        Thers contain mandatory amd opional modules, the essential module is mandatory for any Qt-enable platform.

        Qt Core: no graphical classes

        Qt D-BUS: inter-process communication over the D-Bus protocol on Linux

        Qt QML: classes for QML and JavaScript languages

        Qt Quick: A declarative framework for building highly dynamic applications with custom inferfaces

        Qt Quick Controls: provides lighweight QML types for creating performant user interface

        Qt Quick Test - A unit test framework for QML applications, where the
test cases are written as JavaScript functions

        Besides the essentional modules, Qt offers some addtional modules, like follows:

        Network: Qt Bluetooth / Qt Network Authorization

        UI Components: Qt Quick 3D / Qt Quick Timeline / Qt Charts / Qt Data
Visualization / Qt Lottie Animation / Qt Virtual Keyboard

        Graphics: Qt 3D / Qt Image Formats / Qt OpenGL / Qt Shader Tools / Qt
SVG / Qt Wayland Compositor

        Helper: Qt 5 Core Compatibility APIs / Qt Concurrent / Qt Help / Qt Print
Support / Qt Quick Widgets / Qt SCXML / Qt SQL / Qt State Machine / Qt
UI Tools / Qt XML

Tip about property and signal

        All the properties emit a signal when their value changes. while property value changes, then you can use the Slot-Function toe process the produce:

        on{Property}Changed

        For example, if a 'width' property changes, you can observe it with :

                onWidthChanged { print(width) }

Tip

1. u can use JavaScript to generate random color:

        color: Qt.rgba( Math.random(), Math.random(), Math.rando

2. A rectangle with no width/height set will not be visible, so don't forget to set width/height

3. Mouse area complex demo:

    For more complex interaction, see Qt Quick Input Handlers(https://doc.qt.io/qt-6/qtquickhandlers-index.html) . They are intended to be used instead of elements such as MouseArea and Flickable and offer greater control and flexibility

4. Elements appear earlier in the code have a lower stacking order (called a Z-Value), so A mouse are later in the code will overlap  of a mouse area earlier in the code

5. Generate a random number:

        property int colorIndex: Math.floor(Math.random*3)

then will give us a random number range  from 0 to 2

6. Use Key-Press feature in the QML element:

Item{
    Keys.onLeftPressed:{parent.x += 10}
    Keys.onPressed: function (event) {
        switch(event.key) {
            case Qt.Key_Plus:
                square.scale += 0.2
                break;
            case Qt.Key_Minus:
                square.scale -= 0.2break;
        }
}

Animations

        there are multiple ways to use animations inner of element, more details can follow the demo.

        1. Add Animation-element inside the element       

Image {
    id: box
    x: root.padding;
    y: (root.height-height)/2
    source: "assets/box_green.png"

    NumberAnimation on x {
        to: root.width - box.width - root.padding
        duration: root.duration
        running: root.running
    }

    RotationAnimation on rotation {
        to: 360
        duration: root.duration
        running: root.running
    }
}

        2. Use the Behavior-Element to display animation   

ClickableImageV2 {
    id: blueBox
    x: (root.width-width)/2; y: root.height-height
    source: "assets/box_blue.png"
    text: qsTr("behavior on property")

    Behavior on y {
        NumberAnimation { duration: 4000 }
    }

    onClicked: y = 40
    // random y on each click
    // onClicked: y = 40 + Math.random() * (205-40)
}

        3. Uses a standalone animation anywhere in the document       

ClickableImageV2 {
    id: redBox
    x: root.width-width-40; y: root.height-height
    source: "assets/box_red.png"
    onClicked: anim.start()

    // onClicked: anim.restart()
    text: qsTr("standalone animation")
    NumberAnimation {
        id: anim
        target: redBox
        properties: "y"
        to: 40
        duration: 4000
    }
}