CustomControl QML Type

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

This type is in technology preview and is subject to change.

• 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.