Checkbox on the right?



  • 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()
        }
    }
    


  • 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
            }
        }




  • @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
        }
    }


  • @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.