QML 将 ColumnLayout 子级堆叠在一起？

Question

我是 QML 的新手，所以我可能会问一些显而易见的问题。我正在努力将 ColumnLayout 中的元素堆叠在一起。它们之间的间距太大，我无能为力。有关更多详细信息，请参见屏幕截图：

这是实际的 QML：

ColumnLayout {
    anchors.fill: parent
    spacing: 0

    Rectangle {
        color: "blue"
        Layout.fillWidth: true
        height: 50
    }

    Rectangle {
        color: "red"
        Layout.fillWidth: true
        height: 50
    }

    Rectangle {
        color: "yellow"
        Layout.fillWidth: true
        height: 50
    }
}

我想要做的是让矩形从上到下对齐，并且它们之间的间距可能为 2-3 个像素。

谢谢

Answer 1

如果您删除 parent 的填充并将填充放在那里刚好宽度

，您的代码将正常工作

anchors.left: parent.left
anchors.right: parent.right

之后的代码将如下所示

ColumnLayout {
    anchors.left: parent.left
    anchors.right: parent.right
    spacing: 2 //spacing between items in layout
    Rectangle {
        color: "blue"
        Layout.fillWidth: true
        height: 50
    }
    Rectangle {
    ...
    }
    Rectangle {
    ...
    }
}

这样做，您将授予 ColumnLayout 管理自己 height 的权利。它的高度将与其 children 的高度相关，不会被拉伸到 parent.

另一种方式是通过anchor

管理物品

Item {
  id: item1
}
Item {
  id: item2
  anchor.top: item1.bottom
  anchor.topMargin: 2 
}
Item {
  id: item3
  anchor.top: item2.bottom
  anchor.topMargin: 3 
}

如果您不需要在布局中以特定方式管理项目的位置，那么布局是件好事。

此外，查看此内容会对您有所帮助 Use Case - Positioners and Layouts In QML

QML 将 ColumnLayout 子级堆叠在一起？

QML stack ColumnLayout children on top of each other?

qt

qml

qtquick2