QML ColumnLayout 错位项目

Question

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
            }


        }
    }
}

我想要 2 个 ColumnLayout 彼此相邻，每个 ColumnLayout 占据一定百分比的宽度。 两个列布局中的元素都错位了，我的意思是，它们没有被放置在屏幕顶部（逻辑上应该发生），而是错位在中间附近，出于某种我未知的原因。

这就是它的样子：

图片和文字都放在中间附近，而不是顶部，为什么？

Answer 1

一些建议：

1. 锚定您的

   RowLayout

   ，例如

   RowLayout { anchors.fill: parent }

2. 对于比例

   ColumnLayout

   ，例如20% - 80% 分割，使用类似的东西

ColumnLayout { Layout.fillWidth: true; Layout.preferredWidth: 200 }
ColumnLayout { Layout.fillWidth: true; Layout.preferredWidth: 800 }

3. 要调整布局中项目的大小，请使用

   Layout.preferredWidth

   和

   Layout.preferredHeight

   ，而不是

   width

   和

   height