Basic elements of qml

Item

Item (basic element object) is usually used as a container for other elements, similar to the div element in HTML.

rectangle

    Rectangle{
        id:rect
        width: 800
        height: 400
        color: "slategray"
    }

Gradient

    Rectangle{
        id:rect
        width: 800
        height: 400
        gradient: Gradient{
            GradientStop{ position: 0.0; color: "lightsteelblue" }
            GradientStop{ position: 1.0; color: "slategray" }
        }
    }

Text element

    Text {
        id: text
        text: qsTr("text")
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 28
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }

image

Image {
    id: image
    width: 500
    height: 300
    source: "images/background.png"
}

⿏MouseArea Element

Rectangle{
    id: root
    width: 500
    height: 300
    color: "#b0c4de"
    MouseArea{
        id: area
        width: parent.width
        height: parent.height
        onClicked: {
            if(root.color == "#b0c4de")
            {
                root.color = "#708090"
            }
            else
            {
                root.color = "#b0c4de"
            }
        }
    }
}