RectangleShape QML Type

A filled rectangle with an optional border. More...

Import Statement: import QtQuick.Shapes.DesignHelpers 6.10
Since: QtQuick 6.10

Properties

Detailed Description

RectangleShape is used to fill areas with solid color or gradients and to provide a rectangular border.

Each Rectangle item is painted using either a solid fill color, specified using the fillColor property, or a gradient, defined using one of the ShapeGradient subtypes and set using the gradient property. If both a color and a gradient are specified, the gradient is used.

An optional border can be added to a rectangle with its own color and thickness by setting the strokeColor and strokeWidth properties. Setting the color to transparent creates a border without a fill color.

Rounded rectangles can be drawn using the radius property. The radius can also be specified separately for each corner. Additionally, bevel can be applied on any corner to cut it off sharply.

RectangleShape's default value for preferredRendererType is Shape.CurveRenderer.

Example Usage

    RectangleShape {
        id: rectangleShape
        anchors.centerIn: parent
        radius: 0
        topLeftRadius: 30
        bottomRightRadius: 30
        bevel: true
        joinStyle: ShapePath.MiterJoin
        fillColor: "#3ad23c"
        strokeColor: "transparent"
        visible: false
    }

Property Documentation

bottomLeftRadius : real

bottomRightRadius : real

topLeftRadius : real

topRightRadius : real

If set, these properties define the individual corner radii. A zero value defines that corner to be sharp, while a positive value defines it to be rounded. When unset, the value of radius is used instead.

These properties are unset by default. Assign undefined to them to return them to the unset state.

In the following example, radius is set to 10, and topLeftRadius to 0:

    RectangleShape {
        id: rectangleShape
        anchors.centerIn: parent
        topLeftRadius: 0
        bottomRightBevel: true
        joinStyle: ShapePath.MiterJoin
    }

See also radius.


bottomLeftBevel : bool

bottomRightBevel : bool

topLeftBevel : bool

topRightBevel : bool

If set, these properties define the individual corner bevels. Setting them to false results in either sharp or rounded corners, depending on the values of the individual radius properties. Setting them to true results in bevelled corners. When unset, the value of bevel is used instead.

These properties are unset by default. Assign undefined to them to return them to the unset state.

In the following example, bottomRightBevel is set to true:

    RectangleShape {
        id: rectangleShape
        anchors.centerIn: parent
        topLeftRadius: 0
        bottomRightBevel: true
        joinStyle: ShapePath.MiterJoin
    }

See also bevel.


bevel : bool

This property defines whether the corners of the rectangle are beveled.

Setting it to false results in either sharp or rounded corners, depending on the values of the individual radius properties.

This property may be overridden by the individual bevel properties.

    RectangleShape {
        id: rectangleShape
        anchors.centerIn: parent
        radius: 0
        topLeftRadius: 30
        bottomRightRadius: 30
        bevel: true
        joinStyle: ShapePath.MiterJoin
        fillColor: "#3ad23c"
        strokeColor: "transparent"
        visible: false
    }

See also topLeftBevel, topRightBevel, bottomLeftBevel, and bottomRightBevel.


borderMode : enumeration

The borderMode property determines where the border is drawn along the edge of the rectangle.

ConstantDescription
RectangleShape.InsideThe border is drawn along the inside edge of the item and does not affect the item width.

This is the default value.

ConstantDescription
RectangleShape.MiddleThe border is drawn over the edge of the item and does not affect the item width.
RectangleShape.OutsideThe border is drawn along the outside edge of the item and increases the item width by the value of strokeWidth.

See also strokeWidth.


capStyle : enumeration

This property defines how the end points of lines are drawn. The default value is ShapePath.SquareCap.

ConstantDescription
ShapePath.FlatCapA square line end that does not cover the end point of the line.
ShapePath.SquareCapA square line end that covers the end point and extends beyond it by half the line width.
ShapePath.RoundCapA rounded line end.

dashOffset : real

This property defines the starting point on the dash pattern, measured in units used to specify the dash pattern.

The default value is 0.

See also QPen::setDashOffset().


dashPattern : list<real>

This property defines the dash pattern when strokeStyle is set to ShapePath.DashLine. The pattern must be specified as an even number of positive entries where the entries 1, 3, 5... are the dashes and 2, 4, 6... are the spaces. The pattern is specified in units of the pen's width.

The default value is (4, 2), meaning a dash of 4 * strokeWidth pixels followed by a space of 2 * strokeWidth pixels.

See also QPen::setDashPattern().


fillColor : color

This property holds the fill color.

When set to transparent, no filling occurs.

The default value is "white".

Note: If either fillGradient is set to something other than null, it will be used instead of fillColor.


fillGradient : ShapeGradient

The fillGradient of the rectangle fill color.

By default, no fillGradient is enabled and the value is null. In this case, the fill uses a solid color based on the value of fillColor.

When set, fillColor is ignored and filling is done using one of the ShapeGradient subtypes.

Note: The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like LinearGradient.


fillRule : enumeration

This property holds the fill rule. The default value is ShapePath.OddEvenFill. For an explanation on fill rules, see QPainterPath::setFillRule().

ConstantDescription
ShapePath.OddEvenFillOdd-even fill rule.
ShapePath.WindingFillNon-zero winding fill rule.

joinStyle : enumeration

This property defines how joins between two connected lines are drawn. The default value is ShapePath.BevelJoin.

ConstantDescription
ShapePath.MiterJoinThe outer edges of the lines are extended to meet at an angle, and this area is filled.
ShapePath.BevelJoinThe triangular notch between the two lines is filled.
ShapePath.RoundJoinA circular arc between the two lines is filled.

radius : real

This property defines the corner radius used to define a rounded rectangle.

If radius is a positive value, the rectangle path will be defined as a rounded rectangle, otherwise it will be defined as a normal rectangle.

This property may be overridden by the individual corner radius properties.

The default value is 10.

See also topLeftRadius, topRightRadius, bottomLeftRadius, and bottomRightRadius.


strokeColor : color

This property holds the stroking color.

When set to transparent, no stroking occurs.

The default value is "black".


strokeStyle : enumeration

This property defines the style of stroking. The default value is ShapePath.SolidLine.

ConstantDescription
ShapePath.SolidLineA plain line.
ShapePath.DashLineDashes separated by a few pixels.

strokeWidth : real

This property holds the stroke width.

When set to a negative value, no stroking occurs.

The default value is 1.


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.