QT6 little checkbox inside checkbox?

shokarta

Hello all,

in QT5 i have defined checkbox:

        CheckBox {
            id: autosaveCheckbox
            anchors.centerIn: parent
            onClicked: !checked
            indicator: Rectangle {
                height: 50
                width: 50
                border.width: 2
                border.color: "black"
                Label {
                    anchors.fill: parent
                    text: autosaveCheckbox.checked ? "✓" : ""
                    font.pointSize: Math.min(mainWindow.width * 0.058,
                                             mainWindow.height * 0.035)
                    horizontalAlignment: Label.AlignHCenter
                    verticalAlignment: Label.AlignVCenter
                }
            }
            contentItem: Text {
                leftPadding: autosaveCheckbox.indicator.width + autosaveCheckbox.spacing
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 20
                text: "Scan automaticaly"
            }
        }

so the checkbox looks good and if i do mouseover it, its still ok:

if I run the same code in qt6 and do mouseover, there is a little extra checkbox inside it:

how do i get rid of it?

GrecKo

It seems you are using the Windows QQC2 Style. It has an additional checkbox indicator for the hovered state (see https://github.dev/qt/qtdeclarative/blob/6b5cf5969889a88d5f506692c859d1bd4f59d5dd/src/quickcontrols2/windows/CheckBox.qml#L33-L34 ).

You can try hiding it by inserting the following in your checkbox:

Binding {
    target: autosaveCheckbox.children[2] // 2 is my guess there, try something between 0 and 4 maybe?
    property: "visible"
    value: false
}

ndias

Hi @shokarta,

I share with you a module I have found to implement a customized checkbox control. It is very similar to what you want to implement.

import QtQuick

Item {
    id: control
    property string text
    property bool   checked: false
    property real   padding: 0.1
    width: 30 + label.paintedWidth;  height: 30
    opacity: enabled  &&  !mouseArea.pressed ? 1: 0.3

    Rectangle {
        id: rectangle
        height: control.height * (1 - 2 * padding);  width: height
        x: padding * control.height
        anchors.verticalCenter: parent.verticalCenter
        border.width: 2
        border.color: mouseArea.pressed ? "gray" : "darkgray"
        radius: 0.2 * height
        color: checked ? (mouseArea.isEntred ? "#63d7ff" : "#4fc1e9") : (mouseArea.isEntred ? "#e1e6ef" : "#ccd1d9")

        Text {
            color: "white"
            visible: checked
            anchors.centerIn: parent
            text: '\u2713' // 'CHECK MARK' unicode character
            font.pixelSize: parent.height - parent.border.width
        }
    }

    Text {
        id: label
        text: control.text
        leftPadding: 5
        anchors {
            left: rectangle.right;
            verticalCenter: rectangle.verticalCenter;
            margins: padding * control.height
        }
        font.pixelSize: 0.5 * control.height
    }

    MouseArea {
        id: mouseArea
        property bool isEntred: false
        hoverEnabled: true
        anchors.fill: parent
        onClicked: checked = !checked
        onEntered: isEntred = true
        onExited: isEntred = false
    }
}

shokarta

yea i prefer not to create rect with custom behaviour instead of using checkbox.
I was hoping this is just some checkbox property to set/unset and all will be as needed

GrecKo

It seems you are using the Windows QQC2 Style. It has an additional checkbox indicator for the hovered state (see https://github.dev/qt/qtdeclarative/blob/6b5cf5969889a88d5f506692c859d1bd4f59d5dd/src/quickcontrols2/windows/CheckBox.qml#L33-L34 ).

You can try hiding it by inserting the following in your checkbox:

Binding {
    target: autosaveCheckbox.children[2] // 2 is my guess there, try something between 0 and 4 maybe?
    property: "visible"
    value: false
}

shokarta

workes fine, however can this be prevented but not loading indows QQC2 Style as you said?
QT5 in standard way did not do this

FKosmale

@shokarta You can explicitly load the Basic style; e.g. by using
import QtQuick.Controls.Basic. See also https://doc.qt.io/qt-6/qtquickcontrols2-styles.html#compile-time-style-selection

shokarta

@FKosmale said in QT6 little checkbox inside checkbox?:

@shokarta You can explicitly load the Basic style; e.g. by using
import QtQuick.Controls.Basic. See also https://doc.qt.io/qt-6/qtquickcontrols2-styles.html#compile-time-style-selection

unfortunatelly,
as far as I remove:

import QtQuick.Controls

and pleace this insteade:

import QtQuick.Controls.Basic

then the indicator does not show up at all, only the label next to the indicator:

            CheckBox {
                id: autosaveCheckbox
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.centerIn: parent
                checked: autoSave
                onClicked: !checked
                onCheckedChanged: autoSave = checked
                text: JS.lang(11)
                font.pointSize: textWidth

                indicator: Rectangle {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: height
                    border.width: borderWidth
                    border.color: "black"
                    Label {
                        anchors.fill: parent
                        text: autosaveCheckbox.checked ? "✓" : ""
                        font.pointSize: textWidth * 1.5
                        horizontalAlignment: Label.AlignHCenter
                        verticalAlignment: Label.AlignVCenter
                    }
                }
            }

EDIT: if I run the application on Android Device, then also the checkboxes are missing :(
any solution for Win vs Android?