C

Controls styling

Customizing a control

In some cases, you may want to use a different style for some part of the application's UI, while the other parts use a common or standard style. Perhaps you're happy with the style you're using, but there's a certain button that has some special significance.

One way to create this button is to define it in place, wherever it is needed. For example, perhaps you're not satisfied with the default style's button having square corners. To make them rounded, you can override the background item and set the radius property of Rectangle:

import QtQuick 2.15
import QtQuick.Controls 2.15
Rectangle {
    id: root
    color: "#d7d1df"
    readonly property int leftMargin: 10
    readonly property int rowSpacing: 14
    Button {
        id: button
        text: qsTr("A Special Button")
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "#d6d6d6" : "#f6f6f6"
            radius: 4
        }
    }
}

Another useful way to create the button described earlier is to define it in a separate file, MyButton.qml, for example. This approach is very useful if you plan to use the button in several places.

import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
    id: btn
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: btn.down ? "#d6d6d6" : "#f6f6f6"
        radius: 4
    }
}

To use the control in your application, refer to it by its filename:

Item{
    Rectangle {
        id: root
        color: "#d7d1df"
        readonly property int leftMargin: 10
        readonly property int rowSpacing: 14
        MyButton {
            id: button
            text: qsTr("A Special Button")
        }
    }
}

Default and custom styles

Differences in styling between Qt Quick and Qt Quick Ultralite

  • Qt Quick Ultralite currently provides only the default style.
  • Qt Quick Ultralite supports only compile-time styling.
  • The default controls without style used to define styled controls are located in QtQuick.Templates.
  • The style module must be must be defined in a qmlproject file and added to a ModuleFiles node in the consuming project.
  • The MCU.Config.controlsStyle qmlproject property must be set to your custom style module's URI.

Using the default style for controls

To use the default style for the controls, you need to import QtQuick.Controls in the .qml file.

Creating and using a custom style for controls

In general, Qt Quick Ultralite follows the Qt Quick approach to defining a custom style. For details on the Qt Quick approach, see Customizing Qt Quick controls.

To create a custom style for controls:

  1. Implement custom components for the style based on QtQuick.Templates.

    The components in the QtQuick.Templates module have a useful baseline functionality and make it easier to create components that are interchangeable with the default style controls.

  2. Create a QML module for the custom style.

    The module consists of a .qmlproject file, QML files, C++ headers, and image resources.

    MyControlsStyle/Button.qml
    MyControlsStyle/button-background.png
    MyControlsStyle/Helper.h
    MyControlsStyle/MyControlsStyle.qmlproject

To use a custom style for controls:

  1. Define the style module in a qmlproject file and add it to a ModuleFiles node in the consuming project.
  2. Set the MCU.Config.controlsStyle qmlproject property to your custom style module's URI to make it provide QtQuick.Controls.

    In the example above, one would use MCU.Config.controlsStyle: "MyControlsStyle".

  3. Import QtQuick.Controls in the .qml file.

For reference, see Qt Quick Ultralite styling Example.

Available under certain Qt licenses.
Find out more.