Important: Please read the Qt Code of Conduct -

QML listview spacing problem

  • Hallo,

    I want to build a listview where there are some rectangles and a space between them. Not all rectangles are visible, but it depends on the application setting. Whene a rectangle is not visible, the listview continues properly without holes.
    My code is below:

    ListView {
        id: rowList
        visible: rowVisible
        anchors.left: parent.right
        anchors.leftMargin: 1 nameList.bottom
        anchors.topMargin: 2
        width: 1280* 0.751
        height: nameList.height/5
        orientation: ListView.Horizontal
        spacing: 1
        model: rowModel
        delegate  Rectangle {
                width: cellWidth
                height: nameList.height/5
                color: cellColor
                anchors.left: parent.left
                border.width: 1
                border.color: "white"
                visible: cellVisible
                Text {
                    color: "red"
                    font.capitalization: Font.AllUppercase
                    font.pixelSize: 20
                    verticalAlignment: Text.AlignVCenter
                    wrapMode: Text.WordWrap
                    anchors.fill: parent
                    font.weight: Font.Normal
                    horizontalAlignment: Text.AlignHCenter

    P.S: the "nameList" is another listview on the top of the current listview.

    The listview takes the following data cellWidth, cellColor, cellVisible from a C++ model ("rowModel").
    The C++ model calcolates the cellWidth parameter in the following way: it divides the listview width for the cell number visible.
    The final result is that sometimes the spacing between two consecutive rectangoles is not the same.

    Does someone help me to solve the problem?

    Many Thanks in advance for your support.

    Best Regards,

  • set delegate's height to 0 when delegate not visible

  • Hi @Chobin , as @vladstelmahovsky said, you must to set the delegate's sizes, but your listview is horizontal, so you must set his width to 0 if cellVisible is false, on the other hand, if the listview's orientation is vertical you must set the height.
    The listview dont use strict sizes for delegates, but it reserve the space that the component requires, and the listview dont use the visible property to relayout the content, therefore we must change the delegate size for relayout the listview content and really to hide the delegate
    You can use animation behavior to achieve a nice effect

Log in to reply