QML RowLayout Alignment 看起来不对答案

【问题标题】：QML RowLayout Alignment looks wrongQML RowLayout Alignment 看起来不对
【发布时间】：2021-06-18 20:01:15
【问题描述】：

我正在使用 QT Designer 为我的应用程序中的某个组件创建动态视图。但是，RowLayout 中的“apple”和“Food:”文本项没有正确对齐。我正在努力使这些文本的基线对齐。我不确定我该怎么做。

注意：我可以为苹果设置自定义边距，但我想避免这种情况，因为我希望我的布局对于不同的屏幕尺寸/分辨率尽可能动态

import QtQuick 2.0
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

Item {
    id: item1
    width: 500
    height: 300
    x: 177
    y: 258

    Rectangle {
        id: container
        anchors.centerIn: parent
        anchors.fill: parent
        color: "black"
        anchors.left: parent.left
        anchors.right: parent.right

        ColumnLayout{
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.leftMargin: 16
            anchors.topMargin: 16
            spacing: 0
            Text {
                id: category
                x: 194
                y: 227
                width: 92
                color: "#FFFFFF"
                text: qsTr("Category")
                font.pixelSize: 18
                font.family: "Roboto Medium"
            }
            RowLayout{
                spacing: 2
                Text {
                    id: categoryTitle
                    width: 365
                    height: 10
                    color: "#FFFFFF"
                    text: qsTr("Food: ")
                    font.pixelSize: 60
                    verticalAlignment: Text.AlignBottom
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    font.family: "Roboto"
                }

                Text {
                    id: categoryItem
                    height: 62
                    width: 365
                    color: "#FFFFFF"
                    text: qsTr("apples")
                    font.pixelSize: 30
                    verticalAlignment: Text.AlignBottom
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    font.family: "Roboto"
                }
            }
        }
    }
}

现在的样子：

【问题讨论】：

标签： qt qml

【解决方案1】：

代替：

Layout.alignment: Qt.AlignLeft | Qt.AlignBottom

使用

Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline

【讨论】：