StyleReader QML Type

Reads properties from the active Style for a specific control. More...

• List of all members, including inherited members

Properties

• checked : bool
• controlType : enumeration
• enabled : bool
• focused : bool
• font : font
• global : ControlStyleProperties
• highlighted : bool
• hovered : bool
• palette : palette
• pressed : bool
• vertical : bool

Detailed Description

StyleReader is the bridge between a control in Qt Quick Controls and the active style. It exposes all the style properties — backgrounds, indicators, handles, text, padding, and more — that a control, and its delegates, should bind to. All built-in StyleKit controls use a StyleReader internally for this purpose.

The state properties — hovered, pressed, focused, checked, highlighted, etc. — tell StyleReader which state the control is in. It uses these to resolve and read the correct property values from the Style, taking Themes, StyleVariations, fallback types, and property propagation into account.

When implementing a CustomControl, you can follow the same approach as the built-in controls:

// Main.qml

component CustomButton : Rectangle {
    StyleReader {
        id: styleReader
        controlType: StyleReader.Button
        hovered: hoverHandler.hovered
        pressed: tapHandler.pressed
        palette: app.palette
    }

    implicitWidth: styleReader.background.implicitWidth
    implicitHeight: styleReader.background.implicitHeight
    color: styleReader.background.color
    radius: styleReader.background.radius

    HoverHandler { id: hoverHandler }
    TapHandler { id: tapHandler }

    Text {
        font: styleReader.font
        anchors.centerIn: parent
        text: "ok"
    }
}

See also CustomControl, Style, and StyleVariation.controlType.

Property Documentation

checked : bool

Whether the control is checked.

Bind this to the control's checked property.

The default value is false.

See also ControlStateStyle.checked.

controlType : enumeration

Identifies which control type in the Style this reader reads properties from. This can either be set to one of the predefined values below, or to a custom control type defined in the Style.

See also StyleVariation.controlType.

enabled : bool

Whether the control is enabled.

Bind this to the control's enabled property.

The default value is true.

See also ControlStyleState.disabled.

focused : bool

Whether the control has active focus.

Bind this to the control's activeFocus property.

The default value is false.

See also ControlStateStyle.focused.

font : font [read-only]

The effective font for this control type, as defined by the style. This also takes into account any font overrides set in the text properties of the style.

Bind the control's font property to this property.

global : ControlStyleProperties [read-only]

Provides direct access to the style properties, bypassing any ongoing transition.

While a state transition is ongoing, style properties read from a StyleReader may return interpolated values. By prepending global to the property path, you bypass the transition and get the end-state values immediately.

For example, when transitioning from hovered to pressed, background.color may return an interpolated value between the color in the hovered state and the color in the pressed state. global.background.color, on the other hand, returns the color in the pressed state directly.

See also transitionsEnabled.

highlighted : bool

Whether the control is highlighted.

Bind this to the control's highlighted property.

The default value is false.

See also ControlStateStyle.highlighted.

hovered : bool

Whether the control is hovered.

Bind this to the control's hovered property.

The default value is false.

See also ControlStateStyle.hovered.

palette : palette

The palette of the control. StyleKit uses this to resolve color properties that bind the palette in the Style.

Bind this to the control's palette property.

See also Style.palette.

pressed : bool

Whether the control is pressed.

Bind this to the control's pressed property.

The default value is false.

See also ControlStateStyle.pressed.

vertical : bool

Whether the control is oriented vertically.

Bind this to the control's orientation.

The default value is false.

See also ControlStateStyle.vertical.