ARTICLE AD BOX
Summary
Why does ColumnLayout behave differently when spacing is an integer versus a float? What could be the possible reasons?
When an Item wraps a ColumnLayout and binds implicitHeight: innerLayout.height, hiding all children inside the inner layout should cause the wrapper to collapse to zero height. This works correctly when the inner layout's spacing is an integer, but fails when spacing is a non-integer (e.g. 10.7). In the failing case, the wrapper's height retains a stale value even though its implicitHeight correctly becomes 0, causing the parent layout to misposition subsequent items.
Environment
Qt version: Qt 6.8.3, Qt 5.15.2 (both confirmed) OS: Ubuntu 22.04.6, kernel 6.8.0-111-generic Compiler: GCC 9.4.0 Architecture: x86_64Minimal Reproduction Code
Save the following as main.qml and run with qml main.qml (Qt 6) or qmlscene main.qml (Qt 5):
import QtQuick 2.12 import QtQuick.Layouts 1.15 import QtQuick.Window 2.12 Window { id: root visible: true width: 800 height: 400 title: "Layout Demo" color: "#2b2b2b" property bool hideContent: false ColumnLayout { id: parentLayout anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter spacing: 20 Item { id: wrapper implicitWidth: innerLayout.width implicitHeight: innerLayout.height ColumnLayout { id: innerLayout spacing: 10.7 // non-integer → wrapper.height stays stale after hide // OK: change to 10 (integer) → wrapper.height correctly becomes 0 Rectangle { visible: !root.hideContent implicitWidth: 300 implicitHeight: 60 color: "#e94560" radius: 6 Text { text: "Content A"; color: "white"; anchors.centerIn: parent } } Rectangle { visible: !root.hideContent implicitWidth: 300 implicitHeight: 60 color: "#f5a623" radius: 6 Text { text: "Content B"; color: "white"; anchors.centerIn: parent } } } } Rectangle { id: indicator implicitWidth: 200 implicitHeight: 80 color: "#4caf50" radius: 8 visible: root.hideContent Layout.alignment: Qt.AlignHCenter Text { text: "Indicator"; color: "white"; font.pixelSize: 20; anchors.centerIn: parent } } } Column { anchors.right: parent.right anchors.top: parent.top anchors.margins: 8 spacing: 3 Text { text: "innerLayout.spacing: " + innerLayout.spacing; color: "#aaa"; font.pixelSize: 11 } Text { text: "innerLayout.implicitHeight: " + innerLayout.implicitHeight; color: "#aaa"; font.pixelSize: 11 } Text { text: "innerLayout.height: " + innerLayout.height; color: "#aaa"; font.pixelSize: 11 } Rectangle { width: 180; height: 1; color: "#555" } Text { text: "wrapper.implicitHeight: " + wrapper.implicitHeight; color: "#aaa"; font.pixelSize: 11 } Text { text: "wrapper.height: " + wrapper.height color: (wrapper.height > 0 && wrapper.implicitHeight === 0) ? "#f44" : "#aaa" font.pixelSize: 11 font.bold: wrapper.height > 0 && wrapper.implicitHeight === 0 } Text { visible: wrapper.height > 0 && wrapper.implicitHeight === 0 text: " ↑ STALE! (should be 0)" color: "#f44" font.pixelSize: 11 } Text { visible: wrapper.height === wrapper.implicitHeight text: " height == implicitHeight" color: "#4f4" font.pixelSize: 11 } Rectangle { width: 180; height: 1; color: "#555" } Text { text: "indicator.y: " + indicator.y; color: "#aaa"; font.pixelSize: 11 } Text { text: "parentLayout.implicitHeight: " + parentLayout.implicitHeight; color: "#aaa"; font.pixelSize: 11 } } MouseArea { anchors.fill: parent onClicked: root.hideContent = !root.hideContent } }