Basic Data Types in QML

Qt QML provides a variety of fundamental data types that are essential for building dynamic user interfaces. These types support the definition of UI components, properties, and event handling. Below is a breakdown of key data types used in QML:

• Numeric Types: Includes integer types like int, uint, and floating-point types such as real and double.
• String Type: Represents textual content and supports various formatting styles.
• Boolean Type: Logical values that can be either true or false.
• List Type: Stores multiple values in an array-like structure using square brackets [].
• Object Type: Defines complex structures using curly braces {} to encapsulate properties and methods.
• Function Type: Encapsulates reusable logic blocks that can be invoked with parameters.
• Color Type: Supports color representation via hex codes, RGB, or named colors.
• Image Type: Handles image resources and rendering within the UI.
• Point Type: Denotes 2D coordinates using Qt.point().
• Size Type: Represents dimensions using Qt.size().

Example Implementation

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400
    color: "lightgrey"

    // Numeric properties
    property int count: 42
    property real piValue: 3.14159

    // String declaration
    property string greeting: "Hello, World!"

    // Boolean flag
    property bool isActive: true

    // Array of strings
    property var items: ["Apple", "Banana", "Orange"]

    // Nested object example
    Rectangle {
        width: 100
        height: 100
        color: "lightblue"
    }

    // Function definition
    function displayMessage(text) {
        console.log("Output: " + text)
    }

    // Color property
    property color labelColor: "#00ff00"

    // Image component
    Image {
        source: "icon.png"
        width: 100
        height: 100
    }

    // Coordinate definition
    property point position: Qt.point(150, 150)

    // Dimension specification
    property size dimensions: Qt.size(60, 60)

    // Interactive behavior
    MouseArea {
        anchors.fill: parent
        onClicked: {
            isActive = !isActive
            displayMessage(isActive ? "Enabled" : "Disabled")
        }
    }
}

Layout Management

Effective layout design ensures responsive UI across different screen sizes. QML offers multiple layout mechanisms:

Anchors-Based Positioning

Uses relative positioning through anchors properties to align elements within parent containers or siblings.

Rectangle {
    width: 200
    height: 200

    Rectangle {
        width: 100; height: 100
        color: "red"
        anchors.centerIn: parent
    }
}

Row and Column Arrangement

Row and Column elements organize children horizontally or vertically with configurable spacing.

Row {
    spacing: 10
    Rectangle { width: 50; height: 50; color: "blue" }
    Rectangle { width: 50; height: 50; color: "green" }
}

Grid Layout

Organizes components in a matrix structure using Grid with defined rows and columns.

Grid {
    rows: 2
    columns: 2
    spacing: 10

    Rectangle { color: "orange"; Layout.row: 0; Layout.column: 0 }
    Rectangle { color: "pink"; Layout.row: 0; Layout.column: 1 }
    Rectangle { color: "yellow"; Layout.row: 1; Layout.column: 0 }
    Rectangle { color: "purple"; Layout.row: 1; Layout.column: 1 }
}