Back to Doc.qt.io
Contact Us Blog Download Qt
On this page

C

Rectangle QML Type

Paints a filled rectangle with optionally rounded corners. More...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 1.0
Inherits:

Item

Inherited By:

AlternateKeysListHighlight, KeyboardBackground, and SelectionListBackground

Properties

Detailed Description

Rectangle items are used to fill areas with solid color or gradients.

Appearance

Each Rectangle item is painted using a solid fill color, specified using the color property, or a gradient, defined using a Gradient type and set using the gradient property. If both a color and a gradient are specified, the gradient is used.

You can also create rounded rectangles using the radius property.

Example Usage

The following example shows a Rectangle item, which in this case is used to create a square with rounded corners.

import QtQuick 2.15

Rectangle {
    width: 100
    height: 100
    color: "red"
    radius: 10
}

See also Image.

Property Documentation

border group

border.color : color

border.width : int

The width and color used to draw the border of the rectangle.

The border is drawn inside the rectangle's bounds (width x height); it is never drawn outside them. The default border.color is black.

Note: Unlike Qt Quick, border.width defaults to 0 rather than 1, so no border is drawn until border.width is set explicitly. Setting only border.color has no visible effect.

Note: Unlike radius and gradient, the border properties do not use the on-demand extra property storage. Using border.width or border.color adds only its own small, fixed cost. radius and gradient are the properties that allocate the on-demand storage, and they share a single block: using either one pays for both.

Note: When radius or gradient is combined with a semi-transparent fill color, the border color shows through the translucent fill.

Note: For the same reason, a fully transparent fill color does not produce a hollow outline when radius or gradient is set: the interior is filled with the border color, so the rectangle appears solid. Leave radius at 0 and do not set a gradient to draw a hollow frame.

Rectangle {
    width: 100
    height: 100
    color: "#41cd52"
    border.color: "black"
    border.width: 4
}

See also color, radius, and gradient.

color : color

This property holds the color used to fill the rectangle.

The default color is white.

A green rectangle above a steel blue rectangle.

The following example shows rectangles with colors specified using hexadecimal and named color notation:

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

gradient : Gradient [since Qt Quick Ultralite 2.7]

The gradient to use to fill the rectangle.

This property allows for the construction of simple vertical or horizontal gradients.

Three rectangles stacked: starting with a light steel blue rectangle at the top, a horizontal blue gradient rectangle in the middle, and a vertical blue gradient rectangle at the bottom.

Rectangle {
    y: 0; width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    y: 100; width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    y: 200; width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

If both a gradient and a color are specified, the gradient will be used.

This property was introduced in Qt Quick Ultralite 2.7.

See also color and Gradient.

radius : real

This property holds the corner radius used to draw a rounded rectangle.

If radius is non-zero, the rectangle will be painted as a rounded rectangle, otherwise it will be painted as a normal rectangle. The same radius is used by all 4 corners; there is currently no way to specify different radii for different corners.

Available under certain Qt licenses.
Find out more.