RectangleShape QML Type
A filled rectangle with an optional border. More...
Import Statement: | import QtQuick.Shapes.DesignHelpers 6.10 |
Since: | QtQuick 6.10 |
Properties
- bevel : bool
- borderMode : enumeration
- bottomLeftBevel : bool
- bottomLeftRadius : real
- bottomRightBevel : bool
- bottomRightRadius : real
- capStyle : enumeration
- dashOffset : real
- dashPattern : list<real>
- fillColor : color
- fillGradient : ShapeGradient
- fillRule : enumeration
- joinStyle : enumeration
- radius : real
- strokeColor : color
- strokeStyle : enumeration
- strokeWidth : real
- topLeftBevel : bool
- topLeftRadius : real
- topRightBevel : bool
- topRightRadius : real
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
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.
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.
Constant | Description |
---|---|
RectangleShape.Inside | The border is drawn along the inside edge of the item and does not affect the item width. |
This is the default value.
Constant | Description |
---|---|
RectangleShape.Middle | The border is drawn over the edge of the item and does not affect the item width. |
RectangleShape.Outside | The 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
.
Constant | Description |
---|---|
ShapePath.FlatCap | A square line end that does not cover the end point of the line. |
ShapePath.SquareCap | A square line end that covers the end point and extends beyond it by half the line width. |
ShapePath.RoundCap | A 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().
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().
Constant | Description |
---|---|
ShapePath.OddEvenFill | Odd-even fill rule. |
ShapePath.WindingFill | Non-zero winding fill rule. |
joinStyle : enumeration |
This property defines how joins between two connected lines are drawn. The default value is ShapePath.BevelJoin
.
Constant | Description |
---|---|
ShapePath.MiterJoin | The outer edges of the lines are extended to meet at an angle, and this area is filled. |
ShapePath.BevelJoin | The triangular notch between the two lines is filled. |
ShapePath.RoundJoin | A 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.
Constant | Description |
---|---|
ShapePath.SolidLine | A plain line. |
ShapePath.DashLine | Dashes 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.