CustomControl QML Type

Defines styling for a custom (non-built-in) control. More...

• List of all members, including inherited members

Properties

• controlType : int

Detailed Description

CustomControl allows you to define and style controls that are not part of Qt Quick Controls. This is convenient if you have additional controls or components that should be styled according to the active Style and Theme.

Like the built-in control types (such as abstractButton, pane, and slider), CustomControl inherits ControlStyle. Unlike built-in types, which are implicitly connected to their control type, a CustomControl requires controlType to be set explicitly. Apart from that, they work exactly the same way.

A Style or Theme can define as many custom controls as needed, and a CustomControl in a Theme can have the same controlType as one in the Style. That is no different from, for example, a slider being styled by both the Style and the Theme. The fallback logic is the same.

Any style properties not set on a CustomControl fall back to those set on a control.

The following snippet shows how to define styling for a custom control:

// MyStyle.qml

Style {
    id: style
    readonly property int myControlType: 0
    CustomControl {
        controlType: style.myControlType
        background {
            implicitWidth: 120
            implicitHeight: 30
            radius: 0
        }
        hovered.background.color: "lightslategray"
        pressed.background.color: "skyblue"
    }
}

And the following snippet shows an example on how to implement a custom control that uses it:

// Main.qml

component MyControl : Rectangle {
    StyleReader {
        id: styleReader
        controlType: StyleKit.style.myControlType
        hovered: hoverHandler.hovered
        pressed: tapHandler.pressed
        palette: app.palette
     }

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

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

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

See also StyleReader, ControlStyle, and Style.

Property Documentation

controlType : int

A unique integer identifying this custom control type. Set the same value on the StyleReader.controlType in your custom control implementation to connect it to this style definition.

Custom control types must be in the range 0 to 100000.

See also StyleReader.controlType.