列布局的对齐问题

Question

我试过下面的源代码，得到的结果如上图。

预期输出应为：所有 3 个元素应正确对齐，如下所示。

ColumnLayout {
    id: col
    Layout.maximumWidth: 174
    Layout.maximumHeight: 174
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    spacing: 10

    Image {
        id: iconImage

        Layout.topMargin: showValueText ? 25 : 50
        source: Style.iconAsset("com.polaris.gauges2","icon-widget/"+iconKey,Theme.colors.grayColor)

        ColorOverlay {
            anchors.fill: iconImage
            source: iconImage
            color: colorForColorOverlay
            visible: root.iconColorOverlayVisible
        }

        ColorOverlay {
            anchors.fill: iconImage
            source: iconImage
            color: Theme.colors.moderateOrangeColor
            visible: root.iconModerateColorOverlayVisible
        }

        ColorOverlay {
            anchors.fill: iconImage
            source: iconImage
            color: Theme.colors.criticalRedColor
            visible: root.iconCriticalColorOverlayVisible
        }
    }

    RowLayout {
        id: valueRow

        spacing: 3

        Label {
            id: valueCaption
            font: Style.fontify(Style.buttonFont, { pixelSize: 36 })
            color: Style.dayOrNight("#000000","#ffffff")
            visible: showValueText && text !== ""
        }

        Label {
            id: unitsCaption

            Layout.alignment: Qt.AlignBottom
            horizontalAlignment: Text.horizontalAlignment
            verticalAlignment: Text.verticalAlignment
            font: Style.fontify(Style.buttonFont, { pixelSize: 18 })
            color: Theme.colors.grayColor
            visible: showValueText && text !== ""
        }
    }


    Label {
        id: infoCaption

        Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
        font: Style.fontify(Style.buttonFont, { pixelSize: 18 })
        color: Theme.colors.grayColor
        horizontalAlignment: Text.horizontalAlignment
        verticalAlignment: Text.verticalAlignment
        lineHeight: 0.8
        maximumLineCount: 2
        wrapMode: Text.WordWrap
        visible: text !== ""
    }
}

Answer 1

只是为了说明我上面所说的一切：

    Item {
        id: container
        width: 200
        height: 200
        anchors.centerIn: parent

        Rectangle {
            id: circle
            color: "red"
            anchors.fill: parent
            radius: 100
        }

        ColumnLayout {
            anchors.fill: parent

            Text {
                Layout.fillWidth: true
                Layout.preferredHeight: parent.width / 3
                verticalAlignment: Text.AlignBottom
                horizontalAlignment: Text.AlignHCenter
                text: "line 1"
            }

            Text {
                Layout.fillWidth: true
                Layout.preferredHeight: parent.width / 3
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: "line 2"
            }

            Text {
                Layout.fillWidth: true
                Layout.preferredHeight: parent.width / 3
                verticalAlignment: Text.AlignTop
                horizontalAlignment: Text.AlignHCenter
                text: "line 3"
            }
        }
    }

Answer 2

请找到下面的代码，我希望下面代码的输出非常接近您的预期输出。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item{
        width: 174
        height: 174
        anchors.centerIn: parent

        Rectangle{
            id: circle
            color: "cyan"
            anchors.fill: parent
            radius: 100
        }

        ColumnLayout{
            spacing: 16
            anchors.fill: parent

            Image{
                Layout.topMargin: 41
                source: "images/ev-batterytemp.png"
                Layout.alignment: Qt.AlignHCenter |  Qt.AlignTop
            }

            RowLayout{
                Layout.alignment: Qt.AlignCenter
                Label{
                    text: "0"
                    Layout.alignment: Qt.AlignCenter

                }
                Label{
                    text: "%"
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                }
            }

            Label{
                text: "Fuel"
                Layout.bottomMargin: 25
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
            }
        }
    }
}

谢谢