CODEWITHSUNDEEP
qtqml
Ngranja1512
Ngranja1512

Reputation: 111

How can a checkbox color be customized without losing checkmark in qml?

How can a checkbox color of the indicator be customized without changing the checkmark it shows by default?

I'm going to illustrate what happens by default:

import QtQuick 2.0
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {

    }

}

enter image description here

If i go to documentation the examples I see there don't mantain the checkmark…

https://doc.qt.io/qt-5.9/qtquickcontrols2-customize.html

Because of that, instead of a Rectangle i use a Text component on the indicator property

import QtQuick 2.0
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {
        id: control
        indicator: Rectangle {
            implicitWidth: 26
            implicitHeight: 26
            x: control.leftPadding
            y: parent.height / 2 - height / 2
            radius: 3
            border.color: control.down ? "#17a81a" : "#21be2b"

            Text {
                width: 14
                height: 14
                x: 1
                y: -2
                text: "✔"
                font.pointSize: 18
                color: control.down ? "#17a81a" : "#21be2b"
                visible: control.checked
            }
        }
    }

}

It doesn't look exactly like the default:

enter image description here

Is there anything we can do to make it like the default one?

Upvotes: 4

Views: 4602

Answers (3)

Robert McLean
Robert McLean

Reputation: 356

I'm guessing the way that gives you the most control over customizing a checkbox (or most other controls for that matter) can be found on the Customizing Qt Quick Controls page.

If all you want to do is change the color of the checkmark, I've found that with Qt/QML version (5.12.2) some of the checkbox colors can be customized using the palette property of the checkbox. Like so:

Checkbox
{
   text:"checkered past"
   checked: true
   palette{
      base: "white"       // color of check background
      mid: "black"        // color of border around check background
      text: "green"       // color of the checkmark
      windowText: "black" // color of the label text (in this case "checkered past")
   }
}

Upvotes: 0

malem
malem

Reputation: 51

Here's a somewhat hackish solution, that could break if CheckBox implementation details change:

CheckBox
{

     font.italic: !hasReferential
     font.pointSize: 8
     indicator.width: 15
     indicator.height: 15
     Component.onCompleted: indicator.children[0].color = "green"
}

Upvotes: 0

Aleph0
Aleph0

Reputation: 6084

A brute force solution is to copy the implementation of the CheckBox.qml to your own code and then to change the required parts. It turned out that the check symbol is not a text, but moreover a simple image.

The following would give you a CheckBox being the same as CheckBox.qml, but having a green Check-Symbol instead of a black work. I copied this code from Qt 5.13.

import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {
        id: control
        indicator: Rectangle {
        implicitWidth: 28
        implicitHeight: 28

        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2

        color: control.down ? control.palette.light : control.palette.base
        border.width: control.visualFocus ? 2 : 1
        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid

        ColorImage {
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            defaultColor: "#353637"
            color: "green" // Added this
            source: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png"
            visible: control.checkState === Qt.Checked
        }
        Rectangle {
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            width: 16
            height: 3
            color: control.palette.text
            visible: control.checkState === Qt.PartiallyChecked
        }
    }
    }

}

I guess, that there is no way to override parts of the ColorImage component, as there is no id being set, so that the color property cannot be redefined.

Upvotes: 2

Related Questions