Customizing Qt Quick Controls▲
Qt Quick Controls consist of a hierarchy (tree) of items. In order to provide a custom look and feel, the default QML implementation of each item can be replaced with a custom one.
Customizing a Control▲
Sometimes you'll want to create a "one-off" look for a specific part of your UI, and use a complete style everywhere else. Perhaps you're happy with the style you're using, but there's a certain button that has some special significance.
The first way to create this button is to simply 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.13
import
QtQuick.Controls 2.13
ApplicationWindow
{
width
:
400
height
:
400
visible
:
true
Button
{
id
:
button
text
:
"A Special Button"
background
:
Rectangle
{
implicitWidth
:
100
implicitHeight
:
40
color
:
button.down ? "#d6d6d6"
:
"#f6f6f6"
border.color
:
"#26282a"
border.width
:
1
radius
:
4
}
}
}
The second way to create the button is good if you plan to use your rounded button in several places. It involves moving the code into its own QML file within your project.
For this approach, we'll copy the background code from the default style's Button.qml. This file can be found in the following path in your Qt installation:
$QTDIR/qml/QtQuick/Controls.2/Button.qml
After doing that, we'll simply add the following line:
radius
:
4
To avoid confusion with the controls in the module itself, we'll call the file MyButton.qml. To use the control in your application, refer to it by its filename:
import
QtQuick.Controls 2.13
ApplicationWindow
{
MyButton {
text
:
qsTr("A Special Button"
)
}
}
The