如何将单选按钮文本与QML中的垂直中心对齐

Question

我是Qt QML的新手。我正在尝试实现基于父窗口大小和文本垂直居中对齐的单选按钮但是，单选按钮旁边的文本没有垂直居中对齐。你能帮我哪里做错了吗？

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

}

输出如下所示。在此处输入图像描述

Answer 1

工作代码如下。最大的问题是文本确实是垂直居中的。事实并非如此。

请注意，自定义控件通常最好以固定的像素单位进行，并且大多数控件都假设这样做。如果您真的想要控件的动态可伸缩性，您需要确保所有内容(包括所有隐含的大小、填充、间距等(都能适当地伸缩。

在这里查看基本实现可以帮助您做到这一点：

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