CODEWITHSUNDEEP
qtqml
David
David

Reputation: 3

Custom checkbox shows original checkbox in QML and QtQuick

I'm using the custom checkbox that was used as an example in the QT Documentation posted with QtQuick 2.15 with Qt 6.2.1:

 CheckBox {
id: control
text: qsTr("CheckBox")
checked: true

indicator: Rectangle {
    implicitWidth: 26
    implicitHeight: 26
    x: control.leftPadding
    y: parent.height / 2 - height / 2
    radius: 3
    border.color: control.down ? "#17a81a" : "#21be2b"

    Rectangle {
        width: 14
        height: 14
        x: 6
        y: 6
        radius: 2
        color: control.down ? "#17a81a" : "#21be2b"
        visible: control.checked
    }
}

contentItem: Text {
    text: control.text
    font: control.font
    opacity: enabled ? 1.0 : 0.3
    color: control.down ? "#17a81a" : "#21be2b"
    verticalAlignment: Text.AlignVCenter
    leftPadding: control.indicator.width + control.spacing
}

}

However, this example does not work. This is what I am seeing:

Checked

Checked and Hovered

Unchecked and Hovered

None

I am wondering if there is any fix to this. I have seen others with the same problem and no solution

Upvotes: 0

Views: 452

Answers (1)

Mitch
Mitch

Reputation: 24406

This is the same issue as QTBUG-95589: native styles shouldn't be customised. The Customization Reference says:

Note: The macOS and Windows styles are not suitable for customizing. It is instead recommended to always base a customized control on top of a single style that is available on all platforms, e.g Basic Style, Fusion Style, Imagine Style, Material Style, Universal Style. By doing so, you are guaranteed that it will always look the same, regardless of which style the application is run with. For example:

There are two solutions:

  1. Use a different style. I've linked to the run-time style selection documentation because it's the easiest and most common way of selecting a style, but you can also use compile-time style selection if your application only uses one style.
  2. Style the control completely from scratch. Any time you use a type from QtQuick.Templates, no styling is applied, so you don't need to worry about which style is in use.

In Qt 6, the native styles were added, and at the same time a change was made to make the default style (i.e. the style that is used if none is specified) a platform-specific one. So if you don't specify a style on e.g. Windows, you'll get the native Windows style. Unfortunately this causes issues when customising controls, because the native styles are not designed to be customised.

Eventually the goal is to have Qt Creator warn the user when it detects that they are customising a native style.

Upvotes: 1

Related Questions