如何将 ColumnLayout 中的项目居中

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

您的

ColumnLayout

没有尺寸，您可能必须将其放入带有

anchors.fill: parent

的容器中。所有

Layout.*

都是为嵌套项目设计的，而不是为布局本身设计的。里面的项目没有定义大小策略，您可能必须添加附加属性，例如

Layout.preferredHeight: parent.width / 3

或其他。首先阅读 Qt Quick Layouts 文档。

此外，所有

Alignment

都是错误的，没有

Text.horizontalAlignment

对齐，那是属性的名称，而不是值。你有类似

Text.AlignLeft

之类的东西。

举例说明：

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