Solved Layout-Problems: Items are bigger than the Layout-Space
-
@topse The Image code would be important to see, not just the Rectangle. Image type behaves differently than Rectangle. You could try fillMode.
-
I remember one case where I had to set the available width as Layout.maximumWidth and minimumWidth to RowLayout
-
@Eeli-K Yeah ok... I realized that too. But Layout does same problem with rectangle as with Image -- so I thought Rectangle would be easier to reproduce if anyone wants to :-)
-
@ekkescorner I also tried that... and it got even more interesting... the Rectangles got a left padding :-/
-
@topse
I have some issues with the QML-Layout item as well, it never works out fo the box and always has some issues .
That might be just me or QML-Layout is not yet where its supposed to be, or a comibnation of both.However since I moved from
Layout.fillWidth:
toimplicitWidth
I have far less trouble.for example this is from actuall code: A logo img placed in a RowLayout: with 1 other item, a custom button
RowLayout{ id: headerLayout anchors.fill: parent MenuButton{ id: btnShowHide Layout.alignment: Qt.AlignLeft implicitHeight: headerLayout.height implicitWidth: headerLayout.height srcNormal: "images/Menu_Icon.png" srcPressed:"images/Menu_Icon_pressed.png" onClicked: root.isVisible = !root.isVisible } Item { id: logoContainer Layout.alignment: Qt.AlignRight implicitHeight: headerLayout.height implicitWidth: headerLayout.width-headerLayout.height Image{ id: headerLogo anchors.fill: parent anchors.topMargin: 10 anchors.bottomMargin: 10 source: "images/LogoMain.png" fillMode: Image.PreserveAspectFit } } }
hopefully this can help you.
-
@J.Hilk Looks like a workaround I did not try yet -- Thanks I will do :-)
-
import QtQuick 2.8 import QtQuick.Window 2.2 import QtQuick.Layouts 1.3 Window { visible: true width: 640; height: 480 title: qsTr("Hello World") Rectangle { id: rootArea anchors.fill: parent border.color: "red"; border.width: 2 ColumnLayout { anchors.fill: parent Text { Layout.alignment: Qt.AlignHCenter Layout.preferredHeight: parent.height/6 text: qsTr("Headline") minimumPixelSize: 12; font.pixelSize: 50; fontSizeMode: Text.Fit } Item { Layout.fillWidth: true; Layout.fillHeight: true RowLayout { anchors.fill: parent Item { Layout.fillWidth: true; Layout.fillHeight: true ColumnLayout { anchors.fill: parent Rectangle { Layout.fillWidth: true; Layout.fillHeight: true color: "yellow" border.color: "teal" } Text { Layout.preferredHeight: parent.height/10 Layout.alignment: Qt.AlignCenter Layout.fillWidth: true text: qsTr("Description") minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit horizontalAlignment: Qt.AlignHCenter } } } Text { id: vsText Layout.preferredWidth: rootArea.width/6 Layout.preferredHeight: rootArea.height/6 Layout.alignment: Qt.AlignHCenter text: qsTr("+") minimumPixelSize: 12; font.pixelSize: 62; fontSizeMode: Text.Fit horizontalAlignment: Qt.AlignHCenter } Item { Layout.fillWidth: true; Layout.fillHeight: true ColumnLayout { anchors.fill:parent Rectangle { Layout.fillWidth: true; Layout.fillHeight: true color: "blue" border.color: "yellow" } Text { Layout.preferredHeight: parent.height/10 Layout.alignment: Qt.AlignCenter Layout.fillWidth: true text: qsTr("Description") font.pixelSize: 62; minimumPixelSize: 12; fontSizeMode: Text.Fit horizontalAlignment: Qt.AlignHCenter } } } } } } } }
-
@Eeli-K Thank you very much! Thats the solution. I have to do a closer look now on how you repaired it :-)
Best Regards,
Tobias -
@topse IMO it's a bug in Qt. Layouts are Items but when put directly as children of another Layout they behave differently than other Items, or the parent Layout handles them differently. It's unexpected, unintuitive and undocumented. The solution is to wrap child Layouts inside Items:
ColumnLayout{ Item { Layout.fillWidth: true; Layout.fillHeight: true RowLayout { anchors.fill: parent
-
I do now... thanks for that solution. I agree -- this may not be a feature...