Pane not sizing properly based on childrenRect

mzimmers

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...

mzimmers

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.

dheerendra

Width & Height are missing for many components like ListView & ColumnLayout etc. Can check this by giving values to height & width ?

mzimmers

@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.

mzimmers

This post is deleted!

mzimmers

This post is deleted!

mzimmers

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.