此QML样本的利润来自何处？

Question

我已经看过关于QML中内容余量的大量问题，但所有答案都指向缺少的spacing: 0属性。我已经完成了所有这些操作，但是仍然得到了无法消除的怪异空间。谁能解释为什么这个QML代码：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    RowLayout {
        spacing: 0
        anchors.margins: 0, 0, 0, 0
        anchors.fill: parent;

        Pane {
            anchors.margins: 0, 0, 0, 0
            id: menuPane
            anchors.top: parent.top;
            anchors.bottom: parent.bottom;
            width: 200

            ColumnLayout {
                spacing: 0
                anchors.fill: parent
                anchors.margins: 0, 0, 0, 0

                Rectangle {
                    id: testRect
                    Layout.fillWidth: true
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 20
                    color: "green"
                }
            }
        }

        Pane {
            anchors.margins: 0, 0, 0, 0
            anchors.left: menuPane.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            Rectangle {
                anchors.margins: 0, 0, 0, 0
                anchors.fill: parent
                color: "black"
            }
        }
    }
}

是这样渲染的吗？为什么那里的矩形之间有边距？

Answer 1

这个答案很简短：

将padding您的窗格的属性设置为0，将不留空白。
您还可以单独设置所有填充（leftPadding ...）。这些属性是从Control继承的

在您的示例中看起来像这样：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    RowLayout {
        spacing: 0
        anchors.margins: 0
        anchors.fill: parent;

        Pane {
            anchors.margins: 0
            id: menuPane
            anchors.top: parent.top;
            anchors.bottom: parent.bottom;
            width: 200
            padding: 0


            ColumnLayout {
                spacing: 0
                anchors.fill: parent
                anchors.margins: 0

                Rectangle {
                    id: testRect
                    Layout.fillWidth: true
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 20
                    color: "green"
                }
            }

            Component.onCompleted: console.log(bottomPadding, leftPadding)
        }

        Pane {
            anchors.margins: 0
            anchors.left: menuPane.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            padding: 0

            Rectangle {
                anchors.margins: 0
                anchors.fill: parent
                color: "black"
            }
        }
    }
}