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

Praveen.Illa

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

raven-worx

@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)

Praveen.Illa

@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