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:
- 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. - 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:
- Define the style module in a qmlproject file and add it to a
ModuleFiles
node in the consuming project. - Set the
MCU.Config.controlsStyle
qmlproject property to your custom style module's URI to make it provideQtQuick.Controls
.In the example above, one would use
MCU.Config.controlsStyle: "MyControlsStyle"
. - Import
QtQuick.Controls
in the.qml
file.
For reference, see Qt Quick Ultralite styling Example.
Available under certain Qt licenses.
Find out more.