QML listview spacing problem

Chobin

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
    anchors.top: 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"
                text:"Test"
                font.capitalization: Font.AllUppercase
                font.pixelSize: 20
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WordWrap
                anchors.fill: parent
                font.weight: Font.Normal
                horizontalAlignment: Text.AlignHCenter
                font.family: helveticaCondensed.name
            }
        }
}

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,
Chobin

vladstelmahovsky

set delegate's height to 0 when delegate not visible

Camilo del Real

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