Prevent overlap in Column with scaled
Solved
QML and Qt Quick
-
I have a need to use scale with one item in a Column. I cannot figure out how to eliminate the overlap between the two items. Any ideas? Thanks.
Window { width: 640 height: 480 visible: true title: qsTr("Hello World") Column { anchors.centerIn: parent Rectangle { id: topRect color: "red" height: topText.implicitHeight width: topText.implicitWidth scale: 3 Text { id: topText text: "This should not overlap" } } Rectangle { id: botRect height: 50 width: 50 color: "blue" } } }
-
The issue is that the column does not know about the rendered height of the item if you use scale.
The height property remains the same, as otherwise the scale would scale the new height of the item.If you want to stick with scale, you could do something like this:
Window { width: 400 height: 680 visible: true Column { anchors.centerIn: parent // add a wrapper for scaleable item Item { anchors.horizontalCenter: parent.horizontalCenter // set height and width to the scaled height and width of child height: topRect.height * topRect.scale width: topRect.width * topRect.scale Rectangle { id: topRect color: "red" height: 100 width: 100 scale: 3 // add transformOrigin top left, to scale to the lower right // this way the scaled item will fill the wrapper item transformOrigin: Item.TopLeft } } Rectangle { id: botRect // only for better visualizing this item is right below the scaled one anchors.horizontalCenter: parent.horizontalCenter height: 100 width: 100 color: "blue" } } // just for testing Button { anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter text: "Toggle Scale Change" onClicked: { topRect.scale = topRect.scale === 1 ? 3 : 1 } } }