Rectangle Class Reference

The Rectangle item provides a filled rectangle with an optional border. More...

Inheritance diagram for Rectangle:

Detailed Description

The Rectangle item provides a filled rectangle with an optional border.

Since

4.7

Rectangle items are used to fill areas with solid color or gradients, and are often used to hold other items.

Appearance

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

You can add an optional border to a rectangle with its own color and thickness by settting the border .color and border .width properties.

You can also create rounded rectangles using the radius property. Since this introduces curved edges to the corners of a rectangle, it may be appropriate to set the smooth property to improve its appearance.

Example Usage

{class="float-right"}

The following example shows the effects of some of the common properties on a Rectangle item, which in this case is used to create a square:

import QtQuick 1.0

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

Performance

Using the smooth property improves the appearance of a rounded rectangle at the cost of rendering performance. You should consider unsetting this property for rectangles in motion, and only set it when they are stationary.

See also

Image

---

The documentation for this class was generated from the following file:

• /src/declarative/graphicsitems/qdeclarativerectangle.cpp