@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
[image: 8db35596-b2c2-4360-a93b-9d50176b225f.png]
