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

Question

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

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

            }
        }
    }
}

}

输出如下所示。 enter image description here

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

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

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

qml