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

List of all members, including inherited members

Properties

color : color
gradient : Gradient (since Qt Quick Ultralite 2.7)
radius : real

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

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.

C