Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to resize the GroupBox to fit exactly to the width and height of radio buttons in qml



  • Hi Team,
    I am not an expert in qml. I need help in resizing the groupbox to fit exactly to the width and height of the radio buttons in qml.
    Below is the sample code in QML.

    GroupBox {
            title: qsTr("Log Meas")
            implicitWidth: (radioButton1.implicitWidth + radioButton2.implicitWidth)
            implicitHeight: Math.max(radioButton1.implicitHeight + radioButton2.implicitHeight)
    
            RowLayout {
                anchors.fill: parent
    
                RadioButton {
                    id: radioButton1
                    scale:0.75
                    checked: true
                    text: qsTr("Imperial")
                }
    
                RadioButton {
                    id: radioButton2
                    scale:0.75
                    checked: false
                    text: qsTr("Metric")
                }
            }
        }
    

    The output shown is below
    3ef224b0-7464-4a31-bdd7-b79a1c23cfac-image.png


  • Moderators

    @Praveen-Illa
    did you check the inset and padding properties of the radio buttons?
    https://doc.qt.io/qt-5/qml-qtquick-controls2-control.html#control-layout

    also you shouldnt set the implicit width and height of the groupbox like that, it takes the size automatically from the content (rowlayout)



  • @raven-worx
    Thank you for the inputs.

    I am trying to implement the radio buttons based on the size of the parent window. But, the text beside radio buttons are not aligning vertically center.
    Could you please help me where am doing wrong

    Window {
        id: mainwindow
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        function getActualValue( percent ,  value)
        {
            var percentageValue = Math.round((percent*value)/100);
            return percentageValue;
        }
    
        GroupBox {
            id: groupboxId
            title: qsTr("Log Meas")
            font.pixelSize: mainwindow.getActualValue(2, mainwindow.width)
            width: mainwindow.width/4
            height: mainwindow.height/8
            anchors.centerIn: parent
    
            RowLayout {
                RadioButton {
                    id: radioButton1
                    checked: true
                    font.pixelSize: mainwindow.getActualValue(2, mainwindow.width)
                    text: qsTr("Imperial")
    
                    indicator: Rectangle {
                        implicitWidth: mainwindow.getActualValue(3, mainwindow.height)
                        implicitHeight: mainwindow.getActualValue(3, mainwindow.height)
                        radius: 9
                        border.color: radioButton1.activeFocus ? "red" : "gray"
                        border.width: 1
                        Rectangle {
                            anchors.fill: parent
                            visible: radioButton1.checked
                            color: "#555"
                            radius: 9
                            anchors.margins: 4
                        }
                    }
    
                    contentItem: Text {
                        text: radioButton1.text
                        font: radioButton1.font
                        opacity: enabled ? 1.0 : 0.3
                        color: radioButton1.down ? "#17a81a" : "#21be2b"
                        verticalAlignment: Text.AlignVCenter
                        leftPadding: radioButton1.indicator.width + radioButton1.spacing
                        }
                }
    
                RadioButton {
                    id: radioButton2
                    checked: false
                    font.pixelSize: mainwindow.getActualValue(2, mainwindow.width)
                    text: qsTr("Metric")
    
                    indicator: Rectangle {
                        implicitWidth: mainwindow.getActualValue(3, mainwindow.height)
                        implicitHeight: mainwindow.getActualValue(3, mainwindow.height)
                        radius: 9
                        border.color: radioButton2.activeFocus ? "darkblue" : "gray"
                        border.width: 1
    
                        Rectangle {
                            anchors.fill: parent
                            visible: radioButton2.checked
                            color: "#555"
                            radius: 9
                            anchors.margins: 4
                        }
                    }
    
                    contentItem: Text {
                        text: radioButton2.text
                        font: radioButton2.font
                        opacity: enabled ? 1.0 : 0.3
                        color: radioButton2.down ? "#17a81a" : "#21be2b"
                        verticalAlignment: Text.AlignVCenter
                        leftPadding: radioButton2.indicator.width + radioButton2.spacing
    
                    }
                }
            }
        }
    }
    
    

    The output looks like below
    a629fc4d-fe0c-41b8-beca-51409d82b212-image.png


Log in to reply