Search code examples
qtlayoutqml

Why are my Buttons overlapping in QML ColumnLayout?

It seems there is something pretty fundamental I don't understand about QML layouts.

I've got the following QML.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: applicationWindow

    visible: true
    title: "API control panel"

    Connections {
        target: __ApiObj
    }
    Connections {
        target: __VideotestObj
    }
    Connections {
        target: __ButtonListObj
    }

    ColumnLayout {
        Button {
            id: apiEnabler
            text: "Button 0"
            onClicked: __ApiObj.set_enable_api(!__ApiObj.is_running_prop)
        }
        Button {
            id: videotestPipeline
            text: "Button 1"
            onClicked: __VideotestObj.set_enable_pipeline(!__VideotestObj.is_running_prop)
        }
        Button {
            id: playgroundPipeline
            text: "Button 2"
            onClicked: __PlaygroundObj.set_enable_pipeline(!__PlaygroundObj.is_running_prop)
        }
        ListView {
            id: buttonList
            anchors.fill: parent // Uncomment to show
            clip: true
            model: __ButtonListObj.model
            delegate: Button {
                text: "ListView Button"
                onClicked: model.modelData.set_enable_pipeline(!model.modelData.is_running_prop)
            }
        }
    }
}

The 3 Buttons Button 0, Button 1 and Button 2 are getting displayed as expected. By default, the ListView is not shown at all, except when I uncomment the anchors.fill: parent. The problem with this is that it's undefined behaviour (as I'm told by a log message) and is ugly, because the deledate is painted on top of the other buttons.

Screenshot

What's preventing ColumnLayout to just draw my ListView below Button 2?

Solution

  • Use Layout.fillWidth: true and Layout.fillHeight: true instead of anchors.fill: parent. Within a Layout the sizing is not controlled by anchors