Pane not sizing properly based on childrenRect
-
Hi all -
My latest Rube Goldberg machine uses a list of Panes that expand vertically when a button is clicked. I thought I had this working, but I just added something to the list, and now it's yielding odd results.
For brevity, I tore everything out of my app except the offending code.
// General.qml ListView { id: rowListView model: 1 delegate: ExpandingRow { hiddenItems: { switch (index) { case 0: dateTimePaneLoader; break; } } } } Loader { id: dateTimePaneLoader sourceComponent: dateTimePane } Component { id: dateTimePane Rectangle { height: 100; width: 100; color: 'red' } }
and
// ExpandingRow.qml Pane { id: expandingRow default property alias hiddenItems: visibleWhenExpanded.children implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) ColumnLayout { height: parent.height Button { id: expandButton onClicked: { expandingRow.expanded = !expandingRow.expanded } } Pane { id: visibleWhenExpanded Layout.preferredHeight: childrenRect.height // not the correct value. } } }
The height I'm getting is 1) totally wrong (it's like 288 or something) and 2) unrelated to my Component that I'm passing in. Can someone see what I'm doing wrong here?
Thanks...
-
I got it working. The problem was I had various objects in the pane that were competing for available height (I think it confused the QML engine). This works:
Pane { id: expandingRow property var hiddenContent property int collapsedHeight: 40 property bool expanded: false implicitHeight: expanded ? Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) : collapsedHeight contentItem: ColumnLayout { id: columnLayout height: expandingRow.availableHeight width: expandingRow.availableWidth Pane { id: visiblePane Layout.preferredHeight: collapsedHeight - (expandingRow.padding * 2) Layout.preferredWidth: expandingRow.availableWidth Button { onClicked: expandingRow.expanded = !expandingRow.expanded } } Pane { id: hiddenPane contentChildren: hiddenContent visible: expandingRow.expanded Layout.preferredHeight: hiddenContent.height + (padding * 2) Layout.preferredWidth: expandingRow.availableWidth } } }
Thanks to everyone who looked.
-
Width & Height are missing for many components like ListView & ColumnLayout etc. Can check this by giving values to height & width ?
-
@dheerendra I've added the height settings I'm using in ExpandingRow.qml. As for the ListView, its height is derived from its parent, and goes several layers deep, so I think it would be too confusing to put its entire chain here.
This code is working for my other items; it's just this one that isn't working correctly.
-
I got it working. The problem was I had various objects in the pane that were competing for available height (I think it confused the QML engine). This works:
Pane { id: expandingRow property var hiddenContent property int collapsedHeight: 40 property bool expanded: false implicitHeight: expanded ? Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) : collapsedHeight contentItem: ColumnLayout { id: columnLayout height: expandingRow.availableHeight width: expandingRow.availableWidth Pane { id: visiblePane Layout.preferredHeight: collapsedHeight - (expandingRow.padding * 2) Layout.preferredWidth: expandingRow.availableWidth Button { onClicked: expandingRow.expanded = !expandingRow.expanded } } Pane { id: hiddenPane contentChildren: hiddenContent visible: expandingRow.expanded Layout.preferredHeight: hiddenContent.height + (padding * 2) Layout.preferredWidth: expandingRow.availableWidth } } }
Thanks to everyone who looked.
-
M mzimmers has marked this topic as solved on