QT Quick

Visual Emements in QML

Rectangle Type

import QtQuick 2.3
Item {
    width: 320
    height: 480
    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }
    // This element displays a rectangle with a gradient and a border
    Rectangle {
        x: 160
        y: 20
        width: 100
        height: 100
        radius: 8 // This gives rounded corners to the Rectangle
        gradient: Gradient { // This sets a vertical gradient fill
            GradientStop { position: 0.0; color: "aqua" }
            GradientStop { position: 1.0; color: "teal" }
        }
        border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
    }
    // This rectangle is a plain color with no border
    Rectangle {
        x: 40
        y: 20
        width: 100
        height: 100
        color: "red"
    }
}

Image Type

// This element displays an image. Because the source is online, it may take some time to fetch
Image {
    x: 40
    y: 20
    width: 61
    height: 73
    source: "http://codereview.qt-project.org/static/logo_qt.png"
}

Shared Visual Properties

Opacity and Visibility

import QtQuick 2.3
Item {
    width: 320
    height: 480
    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }
    Item {
        x: 20
        y: 270
        width: 200
        height: 200
        MouseArea {
            anchors.fill: parent
            onClicked: topRect.visible = !topRect.visible
        }
        Rectangle {
            x: 20
            y: 20
            width: 100
            height: 100
            color: "red"
        }
        Rectangle {
            id: topRect
            opacity: 0.5
            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"
        }
    }
}

Transforms

import QtQuick 2.3
Item {
    width: 320
    height: 480
    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }
    Rectangle {
        rotation: 45 // This rotates the Rectangle by 45 degrees
        x: 20
        y: 160
        width: 100
        height: 100
        color: "blue"
    }
    Rectangle {
        scale: 0.8 // This scales the Rectangle down to 80% size
        x: 160
        y: 160
        width: 100
        height: 100
        color: "green"
    }
}

Supported types of user input

Mouse and touch events

import QtQuick 2.12
Item {
    id: root
    width: 320
    height: 480
    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }
    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"
        TapHandler {
            onTapped: rectangle.width += 10
        }
    }
}

Keyboard and button events

import QtQuick 2.3
Item {
    id: root
    width: 320
    height: 480
    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }
    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"
        focus: true
        Keys.onUpPressed: rectangle.y -= 10
        Keys.onDownPressed: rectangle.y += 10
        Keys.onLeftPressed: rectangle.x += 10
        Keys.onRightPressed: rectangle.x -= 10
    }
}

import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
ApplicationWindow {
    width: 300
    height: 200
    visible: true
    ColumnLayout {
        anchors.fill: parent
        TextField {
            id: singleline
            text: "Initial Text"
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            Layout.margins: 5
            background: Rectangle {
               implicitWidth: 200
               implicitHeight: 40
               border.color: singleline.focus ? "#21be2b" : "lightgray"
               color: singleline.focus ? "lightgray" : "transparent"
            }
        }
        TextArea {
            id: multiline
            placeholderText: "Initial text\n...\n...\n"
            Layout.alignment: Qt.AlignLeft
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 5
            background: Rectangle {
               implicitWidth: 200
               implicitHeight: 100
               border.color: multiline.focus ? "#21be2b" : "lightgray"
               color: multiline.focus ? "lightgray" : "transparent"
            }
        }
    }
}