Блог

Я использую QT Designer для создания динамического представления для определенного компонента в моем приложении. Однако текстовые элементы «яблоко» и «Еда:» в списке строк не выровнены должным образом. Я пытаюсь сделать так, чтобы исходные положения этих текстов были выровнены. Я не уверен, как я могу это сделать.

Примечание: Я мог бы установить пользовательское поле только для apple, но я хотел бы избежать этого, так как я хочу, чтобы мой макет был как можно более динамичным для разных размеров экрана/разрешений

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

Как это выглядит прямо сейчас:

Вместо:

 Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
 

использовать

 Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline