How to align the radio button text to the vertically center in QML - qml

Question

I am new to Qt-QML.
I am trying to implement the radio buttons based on the size of the parent window and text to be aligned vertically center
But, the text beside radio buttons is not aligning vertically center.
Could you please help me where I 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.
enter image description here

Answer 1

Working code is below. The biggest issue is that the text was indeed vertically centered. It's the indicator that was not.
Note, customizing controls is normally best done in fixed units of pixels and most of them assume that. If you really want dynamic scalability of controls you need to make sure everything (including all of the implicit sizes, paddings, spacings, etc.) are scaling appropriately.
Reviewing the base implementation here can help you with that:
https://github.com/qt/qtdeclarative/blob/dev/src/quickcontrols2/basic/RadioButton.qml
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
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")
implicitWidth: contentItem.contentWidth + indicator.width + 2 * spacing
implicitHeight: indicator.implicitHeight
indicator: Rectangle {
anchors.verticalCenter: parent.verticalCenter
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")
implicitWidth: contentItem.contentWidth + indicator.width + 2 * spacing
implicitHeight: indicator.implicitHeight
indicator: Rectangle {
anchors.verticalCenter: parent.verticalCenter
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
}
}
}
}
}