qt 在 ColumnLayout 中缩放项目

Question

我想缩放我的项目，使其居中且与窗口具有相对高度。

这是我的代码：

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    readonly property real leftPinPanelWidth: 0.1
    readonly property real rightRangePanelWidth: 0.2

    ColumnLayout {
        width: root.width
        height: root.height

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            color: "red"
            height: Math.round(root.height * 0.8)
            width: Math.round(root.width * 0.55)
        }


        Rectangle {
            color: "blue"
            Layout.alignment: Qt.AlignHCenter
            height: Math.round(root.height * 0.1)
            width: Math.round(root.width * 0.55)

        }
    }
}

默认窗口大小

改变高度：

我不明白为什么红色矩形的比例比蓝色矩形大，以及为什么窗口和红色矩形之间有间隙。

我预计两个矩形的高度始终是窗口大小的 0.9 倍。

Answer 1

三个问题：

• 不要设置ColumnLayout的高度。默认情况下，ColumnLayout 和 RowLayout 均匀分布其子级。 这导致了很大的差距。
• 将

  spacing

  强制为零。布局组件的默认间距为 10 像素。一旦你解决了第一个问题，那么你就会遇到一个小间隙问题，除非你设置

  spacing

  ..
• 请勿在布局组件中设置子

  width

  或

  height

  ；使用

  Layout.preferredWidth

  或

  Layout.preferredHeight

  。布局组件尝试调整其子组件的大小。当它们覆盖你的宽度/高度设置时，这真是令人抓狂。

ColumnLayout {
    anchors.verticalCenter: parent.verticalCenter
    width: root.width
    spacing: 0

    Rectangle {
        Layout.alignment: Qt.AlignHCenter
        Layout.preferredHeight: Math.round(root.height * 0.8)
        Layout.preferredWidth: Math.round(root.width * 0.55)
        color: "red"
    }
    Rectangle {
        Layout.alignment: Qt.AlignHCenter
        Layout.preferredHeight: Math.round(root.height * 0.1)
        Layout.preferredWidth: Math.round(root.width * 0.55)
        color: "blue"
    }
}