StyledItem QML Type
Renders a DelegateStyle. More...
| Import Statement: | import Qt.labs.StyleKit |
| Inherits: | |
| Status: | Technology preview |
This type is in technology preview and is subject to change.
Properties
- delegateStyle : DelegateStyle
Detailed Description
StyledItem renders a DelegateStyle. It reads properties such as color, border, gradient, and image, and creates the corresponding visual elements internally.
If the delegate set on a DelegateStyle is null (the default), StyledItem will automatically be used for rendering.
A custom delegate can be set to any Item. But combined with a StyledItem, you can retain the default rendering while adding overlay, underlay, or shader effects. The following snippet shows how to draw an extra Item on top of the default delegate:
Style {
component Star : Shape {
id: star
property color color
ShapePath {
fillColor: star.color
scale: Qt.size(star.width, star.height)
PathMove { x: 0.50; y: 0.00 }
PathLine { x: 0.59; y: 0.35 }
PathLine { x: 0.97; y: 0.35 }
PathLine { x: 0.66; y: 0.57 }
PathLine { x: 0.78; y: 0.91 }
PathLine { x: 0.50; y: 0.70 }
PathLine { x: 0.22; y: 0.91 }
PathLine { x: 0.34; y: 0.57 }
PathLine { x: 0.03; y: 0.35 }
PathLine { x: 0.41; y: 0.35 }
PathLine { x: 0.50; y: 0.00 }
}
}
button {
background.delegate: StyledItem {
width: parent.width
height: parent.height
// Draw a star on top the default rendering
Star {
anchors.fill: parent
color: "gold"
}
}
}
}Note: Types in Qt.labs modules are not guaranteed to remain compatible in future versions.
For more examples of overlays, underlays and shader effects, see the StyleKit Example.
See also DelegateStyle, delegate, and data.
Property Documentation
delegateStyle : DelegateStyle
The DelegateStyle that this item renders.
This property is required. When StyledItem is the root item of a delegate, it is set automatically. But when used as a child inside a custom delegate, it must be set explicitly.
The following snippet uses a custom delegate that draws a star underneath the default slider handle. Since the root item is not a StyledItem, it declares a required property delegateStyle (which is assigned automatically), and forwards it to the child StyledItem:
Style {
component Star : Shape {
id: star
property color color
ShapePath {
fillColor: star.color
scale: Qt.size(star.width, star.height)
PathMove { x: 0.50; y: 0.00 }
PathLine { x: 0.59; y: 0.35 }
PathLine { x: 0.97; y: 0.35 }
PathLine { x: 0.66; y: 0.57 }
PathLine { x: 0.78; y: 0.91 }
PathLine { x: 0.50; y: 0.70 }
PathLine { x: 0.22; y: 0.91 }
PathLine { x: 0.34; y: 0.57 }
PathLine { x: 0.03; y: 0.35 }
PathLine { x: 0.41; y: 0.35 }
PathLine { x: 0.50; y: 0.00 }
}
}
slider.handle.delegate: Item {
required property DelegateStyle delegateStyle
implicitWidth: delegateStyle.implicitWidth
implicitHeight: delegateStyle.implicitHeight
width: parent.width
height: parent.height
scale: delegateStyle.scale
rotation: delegateStyle.rotation
visible: delegateStyle.visible
// Draw a star underneath the default handle delegate
Star {
width: parent.width * 2
height: parent.height * 2
anchors.centerIn: parent
color: "gold"
}
StyledItem {
delegateStyle: parent.delegateStyle
}
}
}See also DelegateStyle, delegate, and data.
© 2026 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.
