StyledItem QML Type

Renders a DelegateStyle. More...

• List of all members, including inherited members

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"
             }
         }
     }
 }

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.