QML ColumnLayout元素错位：元素未居顶反而居中，需两列并排

问题代码 #

import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts 6.3

Window {
    id: root
    width: 1280
    height: 720
    visible: true
    title: qsTr("Redundant Coding")

    RowLayout{

        ColumnLayout{

            Layout.leftMargin: root.width / 16
            Layout.rightMargin: root.width / 16

            Text {
                id: selectedAlgorithmText
                text: "Wybrany algorytm:"
                font.pixelSize: 16
            }

            Text {
                id: algorithmText
                text: qsTr("Hamming")
                font.pixelSize: 20
            }

            Slider {
                id: slider
                snapMode: RangeSlider.SnapOnRelease
                stepSize: 1
                to: 2
                value: 0
            }

            Button {
                id: confirmButton
                text: qsTr("Zatwierdź")
            }

            Button {
                id: exitButton
                text: qsTr("Wyjście")
            }

        }

        ColumnLayout{

            Image {
                id: image
                width: 300
                height: 300
                source: "../assets/test.png"
                fillMode: Image.PreserveAspectFit
            }

            Text {
                id: descriptionText
                width: 300
                height: 300
                text: qsTr("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                font.pixelSize: 24

                wrapMode: Text.WrapAnywhere
            }

        }
    }
}

问题描述 #

我希望两个ColumnLayout并排显示，各自占据一定比例宽度，但当前两个布局里的元素没有按预期靠屏幕顶部排列，反而错位到了中部，效果如下：

问题根源 #

Qt Quick的RowLayout和ColumnLayout默认都会把内部元素垂直居中对齐，而且RowLayout本身在Window里也会默认居中显示，双重居中就导致整个布局和里面的元素都跑到了屏幕中间。

解决办法 #

要让元素贴紧顶部，只要做两处设置：

• 给外层的RowLayout加上Layout.alignment: Qt.AlignTop，让它自己贴紧Window顶部；
• 给两个ColumnLayout分别加上Layout.alignment: Qt.AlignTop，让布局里的元素从顶部开始排列。

如果要让两个ColumnLayout按比例分配宽度，给它们添加Layout.fillWidth: true，再通过Layout.weight设置比例——比如第一个设Layout.weight:1，第二个设Layout.weight:2，那第二个布局的宽度就是第一个的两倍。

修改后的完整代码 #

import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts 6.3

Window {
    id: root
    width: 1280
    height: 720
    visible: true
    title: qsTr("Redundant Coding")

    RowLayout{
        // 让RowLayout贴紧窗口顶部
        anchors.fill: parent
        Layout.alignment: Qt.AlignTop

        ColumnLayout{
            Layout.leftMargin: root.width / 16
            Layout.rightMargin: root.width / 16
            // 让ColumnLayout内部元素从顶部开始排列
            Layout.alignment: Qt.AlignTop
            // 分配宽度比例，这里设为1
            Layout.weight: 1
            Layout.fillWidth: true

            Text {
                id: selectedAlgorithmText
                text: "Wybrany algorytm:"
                font.pixelSize: 16
            }

            Text {
                id: algorithmText
                text: qsTr("Hamming")
                font.pixelSize: 20
            }

            Slider {
                id: slider
                snapMode: RangeSlider.SnapOnRelease
                stepSize: 1
                to: 2
                value: 0
            }

            Button {
                id: confirmButton
                text: qsTr("Zatwierdź")
            }

            Button {
                id: exitButton
                text: qsTr("Wyjście")
            }
        }

        ColumnLayout{
            // 让ColumnLayout内部元素从顶部开始排列
            Layout.alignment: Qt.AlignTop
            // 分配宽度比例，这里设为1，和第一个等宽；如果要2倍就设为2
            Layout.weight: 1
            Layout.fillWidth: true

            Image {
                id: image
                width: 300
                height: 300
                source: "../assets/test.png"
                fillMode: Image.PreserveAspectFit
            }

            Text {
                id: descriptionText
                width: 300
                height: 300
                text: qsTr("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                font.pixelSize: 24
                wrapMode: Text.WrapAnywhere
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Michael21