1

我已经查看了关于 QML 中内容边距的大量关于 SO 的问题，但所有答案都指向缺失的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"
            }
        }
    }
}

是这样渲染的？为什么矩形之间的边距在那里？ QML 窗口截图

4

1 回答 1

5

这个答案很简短：

将您的窗格的属性设置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"
            }
        }
    }
}
于 2016-10-06T15:12:32.177 回答