Checkbox on the right?

Tom_H

Is there a way to get a checkbox with the box on the right of the text? LayoutMirroring doesn't work because the text is not properly aligned on the left. The only way I have found to get this is to build it myself using a RowLayout, Label, MouseArea, and CheckBox like this:

// All this for having the checkbox on the right??
RowLayout {
    id: mi_checkbox
    function on_clicked() {
        console.log('on_clicked')
        // do stuff
        menu.close()
    }

    Label {
        Layout.fillWidth: true
        leftPadding: mymenu.itemAt(0).leftPadding
        text: 'Checkable thing'
        MouseArea {
            anchors.fill: parent
            onClicked: {
                cb_item.toggle()
                mi_checkbox.on_clicked()
            }
        }
    }
    CheckBox {
        id: cb_item
        onClicked: mi_checkbox.on_clicked()
    }
}

Shrinidhi Upadhyaya

Hi @Tom_H , please have a look at my sample code:-

    CheckBox {
        id: control
        text: qsTr("CheckBox")
        checked: true
        width: 100
        height: 30

        indicator: Rectangle {
            height: parent.height
            width: height
            radius: 3
            anchors.right: parent.right
            border.color: control.down ? "#17a81a" : "#21be2b"

            Rectangle {
                width: parent.width / 2
                height: parent.height / 2
                anchors.centerIn: parent
                radius: 2
                color: control.down ? "#17a81a" : "#21be2b"
                visible: control.checked
            }
        }

        contentItem: Text {
            text: control.text
            font.pixelSize: parent.height / 2
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            verticalAlignment: Text.AlignVCenter
            anchors.left: parent.left
            width: parent.width / 2
        }
    }

Tom_H

@Shrinidhi-Upadhyaya Thank you.

Tom_H

@Shrinidhi-Upadhyaya This also works:

MenuItem {
    text: 'Example'
    checkable: true
    indicator.anchors.right: right
    indicator.anchors.rightMargin: rightPadding
    contentItem.anchors.left: left
    contentItem.anchors.leftMargin: leftPadding
    Component.onCompleted: {
        contentItem.leftPadding = 0
    }
}

Shrinidhi Upadhyaya

@Tom_H , ohh good,it basically depends upon your usage, as both Checkbox and MenuItem somewhat inherit the same members from AbstractButton,Control and Item.You can easily customized any component the way you want,so it basically depends upon your requirement and the amount of efforts needed to customize it,but both CheckBox and MenuItem are there for different purposes.A simple example is the property "checkable" as checkable is by default false in MenuItem while in CheckBox its true.