QML first application Window

1. Create a QML project

Create a new file or project --> select Qt Quick Application

Then a default Window is generated

 

 2. How to load the qml file in main.cpp

QQmlApplicationEngine provides a convenient way to load applications from a single QML file.

This class combines QQmlEngine and QQmlComponent to provide a convenient way to load a single QML file

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

3. Introduction to Windows

The x, y position of the Window is relative to the screen, or relative to the virtual desktop, the coordinates of the upper left corner of the screen are (0,0). To the right x keeps increasing, and down y keeps increasing.

Window { x: 100; y: 100; width: 100; height: 100 }

Limit the maximum and minimum height, maximum and minimum width.

Usually the newly created Window can be scaled freely, and the following member restrictions can be used.

Window {
    visible: true
    width: 100
    height: 100
    title: qsTr("Hello World")

    maximumHeight:200
    minimumHeight:50
    maximumWidth:200
    minimumWidth:50
}

transparency:

opacity:0.5

Signals and slots:
In QML, for any attribute, a signal and slot function for attribute modification will be generated, for example: the following is the signal sent when the width and height change.

void heightChanged(int arg)

void widthChanged(int arg)

Then the corresponding slot function is, add on in front and capitalize.

    onWidthChanged: {
        console.log("width = ",width);
    }

    onHeightChanged: {
        console.log("Height = ",height);
    }

Custom signal:

A custom attribute value will automatically generate the onValueChanged slot function.

Then create a Button, every time the Button is clicked, the value will increase automatically, and the valueChanged() signal will be triggered.

    property int value: 0

    onValueChanged: {
        console.log("value = ",value);
    }

    Button{
        width: 50
        height: 50
        x:0
        y:0
        background: Rectangle{
            color:"red"
        }

        onClicked: {
            value++
        }
    }

Focus:

Two Buttons are made in the Window, and there is an activeFocusItem attribute inside, which captures the current focus, and naturally there will be a signal of focus change, and the slot onActiveFocusItemChanged.

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

//    maximumHeight:200
//    minimumHeight:50
//    maximumWidth:200
//    minimumWidth:50

//    opacity:0.5

//    onWidthChanged: {
//        console.log("width = ",width);
//    }

//    onHeightChanged: {
//        console.log("Height = ",height);
//    }

//    property int value: 0

//    onValueChanged: {
//        console.log("value = ",value);
//    }

    Button{
        width: 50
        height: 50
        id:b1
        objectName:"b1"
        x:0
        y:0
        focus: true
        background: Rectangle{
            border.color:b1.focus?"red":"black"
            border.width:b1.focus?3:1
        }
    }

    Button{
        width: 50
        height: 50
        id:b2
        objectName:"b2"
        x:60
        y:0
        background: Rectangle{
            border.color:b2.focus?"yellow":"black"
            border.width:b2.focus?3:1
        }
    }

    onActiveFocusItemChanged: {
        console.log("ActiveFocusItem: ",activeFocusItem.objectName);
    }
}