CODEWITHSUNDEEP
qtqml
user13518368
user13518368

Reputation: 117

How to change QML checkbox indicator and checkmark color?

I have CheckBox element in QML:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12


Item

{
    id: root

    CheckBox
    {
        id: timeCheckbox
        height: 30
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.top: parent.top
        anchors.topMargin: 10
        text: "Display time"
        checked: true
    }

    CheckBox
    {
        id: delayCheckBox
        height: 30
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.top: timeCheckbox.bottom
        anchors.topMargin: 10
        text: "Enable Delay"
        checked: true
    }
}

I want to change the indicator background color to blue and check mark sign to black. But If I try with adding this in CheckBox element everything breaks and there is only blue rectangle displayed:

indicator: Rectangle 
{
     background: "blue"
}

I also tryed with this but no success:

Component.onCompleted: indicator.children[0].color = "blue"

And for checkmark color I could not find any sources for changing the color.

I have this:

enter image description here

And I want to modify it to this:

enter image description here

Any hint or help is welcome. Thanks in advance.

Upvotes: 1

Views: 3194

Answers (1)

jolly
jolly

Reputation: 66

Unfortunately you cannot modify QML checkbox by accessing the property but here there are 2 possibles solutions

-1 you can work via stylesheet like that:

 @QCheckBox::indicator{
   background-color: #0000FF;
   }
   @

-2 you can copy the qml implementation of the checkbox and change de property like here

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: "blue" // you can add your color here
        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
    }
}
}



}

hope it helps , bye

Upvotes: 3

Related Questions