使用ColLayout在RowLayout中进行QML文本对齐

Question

我想在RowLayout中对齐不同的文本，如下图

这是我的代码

        Rectangle {
            id:root
            anchors.fill: parent
            color: "black"
            RowLayout
            {
                ColumnLayout
                {
                    id:col
                    Text {
                        text: "t1"
                        font.pixelSize:root.height/4
                        color: "white"
                    }
                    Text {
                        id:txt
                        text: "t2"
                        font.pixelSize:root.height/4
                        color: "white"
                    }
                }
                Text {
                    id:txt3
                    text: "t3"
                    font.pixelSize:root.height
                    color: "white"
                }
            }

        }

但我无法用t3调整t2基线（我希望t2和t3从底部开始从同一行开始）但我的代码的结果是：

Answer 1

如果您不使用ColumnLayout作为较小的文字，则可以将baselines上较小和较大的文字对齐：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

Window {
    id: window
    width: 300
    height: 300
    color: "black"
    visible: true

    RowLayout {
        id: root

        Text {
            id: txt
            text: "t2"
            font.pixelSize: window.height / 4
            color: "white"
            anchors.baseline: txt3.baseline

            Text {
                text: "t1"
                font.pixelSize: window.height / 4
                color: "white"
                anchors.bottom: parent.top
            }
        }
        Text {
            id: txt3
            text: "t3"
            font.pixelSize: window.height / 1.5
            color: "white"
        }
    }
}

Answer 2

Rectangle
    {
        id:root
        anchors.fill: parent
        color: "black"
        RowLayout
        {
            anchors.fill: parent
            ColumnLayout
            {
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignBottom
                id:col
                Text {
                    text: "t1"
                    font.pixelSize:root.height/4
                    color: "white"
                }
                Text {
                    id:txt
                    text: "t2"
                    font.pixelSize:root.height/4
                    color: "white"
                }
            }
            Text {
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignBottom
                id:txt3
                text: "t3"
                font.pixelSize:root.height
                color: "white"
            }
        }
    }

Answer 3

您还可以将 Baseline 与布局一起使用：

Prelude> print (check 5)
[1]
Prelude> print (check 17)
[1]
Prelude> print (check 18)
[1,2,3,6,9]