QML Check Box

The check box can be in seven different states: enabled - checked and unchecked, disabled - checked and unchecked, pressed - in checked and unchecked states, and finally "mouseover" state when the cursor is over the checkbox, but not pressed.

The mouseover state is triggered by the cursor entering and exiting the check box area. The disabled and checked stated can also be set from "outside" by setting the isDisabled and isChecked variables. The onPressed code remembers the state the check box was in and changes the icon to pressed version, and onReleased reverts the icon change. The onClicked toggles the state from on to off and back.

Checked state

Checked and pressed state

Disabled state

import QtQuick 1.0

Rectangle {

id: checkBoxRect
width: 100
height:  30

property string chkUnchecked: "images/checkbox_enabled.png"
property string chkChecked : "images/checkbox_checked.png"

property string chkUncheckedPressed : "images/checkbox_pressed.png"
property string chkCheckedPressed : "images/checkbox_checked_pressed.png"

property string chkDisabled: "images/checkbox_disabled.png"
property string chkDisabledChecked: "images/checkbox-checked_disabled.png"
property string chkMouseOver: "images/checkbox_enabled_mouseover.png"

property bool pressed: false
property string src: chkUnchecked
property bool isDisabled : false
property bool isChecked: false

property string tempState : ""
property string tempStateHover : ""
property string status : ""

Image {
    id: checkBoxImg
    width: 30
    height: parent.height
    source: src
    fillMode: Image.PreserveAspectFit;

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            if(!isDisabled)
            {
                if(checkBoxRect.state == "mouseover")
                    checkBoxRect.state = tempStateHover == "on" ? "off" : "on";
                else
                    checkBoxRect.state = checkBoxRect.state == "on" ? "off" : "on";
                tempStateHover = checkBoxRect.state;
            }
        }
        onPressed: {
            if(!isDisabled)
            {
                tempState = checkBoxRect.state;
                checkBoxRect.state = "pressed";
            }
        }
        onReleased: {
            if(!isDisabled)
                checkBoxRect.state = tempState;
        }
        onEntered: {
            if(!isDisabled)
            {
                tempStateHover = checkBoxRect.state;
                checkBoxRect.state = "mouseover";
            }
        }
        onExited: {
            if(!isDisabled)
                checkBoxRect.state = tempStateHover;
        }
    }
}

Component.onCompleted: {
    if(isDisabled)
        src = isChecked ? chkDisabled : chkCheckedDisabled
    else
        checkBoxRect.state = "off";
}

Text{
    id: checkboxText
    height: parent.height
    width:  parent.width - checkBoxImg.width
    text: "click here"
    anchors.left: checkBoxImg.right
    verticalAlignment: Text.AlignVCenter
}

states: [
    State {
        name: "on"
        PropertyChanges { target: checkBoxImg; source: chkChecked }
        PropertyChanges { target: checkBoxRect; pressed: true }
    },
    State {
        name: "off"
        PropertyChanges { target: checkBoxImg; source: chkUnchecked }
        PropertyChanges { target: checkBoxRect; pressed: false }
    },
    State {
        name: "pressed"
        PropertyChanges {target: checkBoxImg; source: (tempState == "on" || tempStateHover == "on") ? chkCheckedPressed : chkUncheckedPressed}
    },
    State {
        name: "mouseover"
        PropertyChanges {target: checkBoxImg; source: chkMouseOver}
    }
]
}

Reference:

QT QML anchors probleme by Evgeny. Also posted on my website